固定幅の Div で省略記号を使用して複数行のテキスト オーバーフローを作成する方法

固定幅と高さで付加された省略記号によるクロスブラウザーの複数行テキスト オーバーフロー

問題:

方法<div> に省略記号を作成できますか?固定幅と複数行で、オーバーフローしたテキストが切り詰められるようにしますか?

解決策:

これを実現するには、jQuery スニペットを利用して、希望の範囲内に収まるまでテキストの最後の単語を入力します。

実装:

1. <div> の HTML マークアップを定義します。幅と高さが固定され、テキストを含める段落 (

   ) が設定されます。

2. CSS を追加してオーバーフローを非表示に設定し、切り捨てが表示されないようにします。

3. 切り捨てを実行する jQuery 関数を作成します。この関数は次のことを行います:

   • を取得します。

   • <div> 要素の高さを計算します。 while ループを使用して、希望の高さに収まるまでテキストの最後の単語を削除します。ループは text() 関数を使用して

     のコンテンツを更新します。

     追加の考慮事項:
     2. このアプローチには、切り詰めるための JavaScript が含まれます。パフォーマンスを向上させるために、サーバー側の切り捨てと組み合わせることを検討してください。

     に width: 100% を追加します。 CSS を使用して、全幅を確実に占めるようにします。 <div>.

     例:
     HTML

     <div>

     CSS

     #fos {
       width: 300px;
       height: 190px;
       overflow: hidden;
     }
     
     #fos p {
       width: 100%;
       padding: 10px;
       margin: 0;
     }

     jQuery

     var $p = $('#fos p');
     var divh = $('#fos').height();
     
     while ($p.outerHeight() > divh) {
       $p.text(function (index, text) {
         return text.replace(/\W*\s(\S)*$/, '...');
       });
     }

     デモ: https://jsfiddle.net/w0n5cy2j/

以上が固定幅の Div で省略記号を使用して複数行のテキスト オーバーフローを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。