CSS で複数行の省略記号を作成するにはどうすればよいですか?

オーバーフローしたブロック内の複数行の省略記号に CSS を使用する

指定された CSS プロパティがオーバーフロー: 非表示;テキストオーバーフロー: 省略記号;ホワイトスペース: ナラップ;は、単一行コンテナ内のテキストを切り詰めるためによく使用されます。ただし、複数行のオーバーフロー テキストに省略記号を適用する必要がある場合はどうすればよいでしょうか?

望ましい結果:

目標は、次のような複数行のテキスト コンテナーを取得することです。省略記号 (...)。たとえば、次の例を考えてみましょう:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...| /* Here it's overflowed, so "..." is shown. */
+--------------------+

現在の制限:

残念ながら、上記の CSS プロパティは 1 行の要素にのみ適用されます。目的の複数行機能を実現するには、外部ソリューションが必要です。

複数行省略記号用の jQuery プラグイン

これを特に処理するいくつかの jQuery プラグインが利用可能です問題:

• http://pvdspek.github.com/jquery.autoellipsis/
• http://dotdotdot.frebsite.nl/
• http://keith-wood.name/more.html
• http://github.com/tbasse/jquery-truncate

これらプラグインには、改行効果やフェード効果など、省略記号の動作をカスタマイズするためのさまざまなオプションが用意されています。

パフォーマンスに関する考慮事項:

これらの間でパフォーマンスが異なる可能性があることに注意することが重要です。プラグイン。最適なソリューションを決定するには、行数、ブラウザのパフォーマンス、望ましい効果などの要素を考慮してください。

以上がCSS で複数行の省略記号を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。