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

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

DDD

リリース： 2024-10-27 08:23:30

オリジナル

454 人が閲覧しました

How can we append ellipses (...) to indicate truncation on a multi-line `` element with a fixed width and height?

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

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 サイトの他の関連記事を参照してください。