简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
テキストオーバーフローを使用してハイフネーションを防ぐ方法
P粉464208937
P粉464208937 2023-09-03 15:00:49
0
1
529
<p>一部のタイトルに最大行数を設定しようとしていますが、問題は、行がハイフンで終わる場合があることです。私が必要とするのは、単語を分割する必要がある場合、その単語を完全に非表示にし、省略記号を前の単語の後に配置する必要があることです。 </p> <p>このコードは問題を示しています: </p> <p> <pre class="brush:css;toolbar:false;">#head { 幅:300ピクセル; フォントサイズ: 20px; 表示: -webkit-box !重要; 色: #000000 !重要; テキストオーバーフロー: 省略記号 !重要; -webkit-line-clamp: 4 !重要; -webkit-box-orient: 垂直方向 !重要; オーバーフロー: 非表示!重要; }</pre> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html> <div id="ヘッド"> Lorem Ipsum は、印刷および植字業界の単なるダミー テキストです。Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして作成した 1500 年代以来、業界の標準ダミー テキストです。 </div> </html></pre> </p> <p>「ever」という単語に切れ目があるのですが、どうにかしてこれを防ぐことはできますか? </p>
P粉464208937
P粉464208937

全員に返信(1)
P粉231112437
P粉2311124372023-09-04 10:19:09 1棟

単語区切りを完全に非表示にし、前の単語の後に省略記号を配置する効果を実現するには、JavaScript を使用してテキスト コンテンツを操作します。これを実現するためにコードを変更する方法の例を次に示します:

リーリー リーリー リーリー

このコードでは、JavaScript 関数 truncateText を使用して、指定された最大長を超えたテキスト コンテンツを切り捨てます。この関数は、最大長内の最後のスペース文字を検索し、残りのテキストを省略記号に置き換えます。

省略記号を追加する前に、maxLength パラメータを希望の文字数に調整できます。

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！