幅と高さが固定された複数行の `` 要素で切り捨てを示すために省略記号 (...) を追加するにはどうすればよいでしょうか?

固定幅、複数行のテキスト オーバーフローの省略記号処理

Web 開発の領域では、指定されたコンテナ内のテキスト オーバーフローをエレガントに処理する必要が生じます。幅と高さ。複数行の

で切り捨てを示すために省略記号 (...) を追加するにはどうすればよいですか? element?

考えられる解決策:

jQuery は、次のマークアップと CSS を使用した解決策を提供します:

<code class="html"><div id="fos">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div></code>

<code class="css">#fos {
  width: 300px;
  height: 190px;
  overflow: hidden;
}
#fos p {
  padding: 10px;
  margin: 0;
}</code>

jQuery コードを繰り返します希望の高さに達するまでテキストの最後の単語をトリミングします:

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

考慮事項:

• この手法は、次のような場合でも、視覚的に正しい結果を保証します。 JavaScript が無効です。
• サーバー側の切り捨てによりパフォーマンスが向上します。
• これは不完全な解決策であり、実際の実装にはさらなる改良が必要です。

デモ:

ライブ デモンストレーションは jsFiddle で利用できます: https://jsfiddle.net/5638d9y0/

追加リソース:

• [CSS Flexbox チュートリアル](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
• [Flexbox の紹介](https://developer.mozilla .org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
• [Flexbox の完全ガイド](https://www.w3schools.com/css/css3_flexbox.asp)

以上が幅と高さが固定された複数行の `` 要素で切り捨てを示すために省略記号 (...) を追加するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。