複数行のテキスト省略記号: 純粋な CSS で可能ですか?

複数行のテキスト省略記号: 可能ですか?

あふれたテキストを省略記号 (...) で切り詰める機能は、一般的な CSS 要件。ただし、標準の text-overflow プロパティは単一行でのみ機能します。ここで疑問が生じます。この動作を複数行で再現して、必要に応じてテキストを折り返せるようにすることはできるでしょうか?

答えは、はっきりと「はい」です。この目的のために特別に設計された CSS プロパティを使用すると、JavaScript に頼らずに目的の効果を実現できます。例:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

このコードは、最大 3 行のテキストを表示する div を作成し、残りのテキストは省略記号で置き換えられます。 -webkit-line-clamp プロパティを調整することで、表示される最大行数を制御できます。

この手法は現在、Safari や Chrome などの WebKit ベースのブラウザでのみ機能することに注意してください。ブラウザ間の互換性が必要な場合は、ポリフィルまたはより複雑な JavaScript ソリューションの使用を検討してください。

以上が複数行のテキスト省略記号: 純粋な CSS で可能ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。