CSS を使用して複数行のテキスト省略記号を実装するにはどうすればよいですか?

複数行でのテキスト省略記号の実装

CSS だけでも、単一行のオーバーフローに対して省略記号を使用してテキストの切り捨てを有効にし、複数行で同じ効果を実現できます。複数の行があると問題が生じる可能性があります。 「2 行のテキスト オーバーフロー省略記号 [重複]」という質問では、この問題について詳しく説明しています。

一見すると、テキストには text-overflow: ellipsis と White-space: nowrap のような CSS プロパティの組み合わせで十分であるように見えます。切り捨て。ただし、white-space: nowrap ではテキストの折り返しが防止され、それ以降の行に十分なスペースがあるにもかかわらず、1 行のテキストが切り詰められてしまいます。

この制限を克服するには、次の CSS プロパティを考慮してください:

• display: -webkit-box: 柔軟なボックス レイアウト モデルを初期化し、複数行のtext.
• -webkit-line-clamp: 3: テキストが占める最大行数を定義します (この場合は 3)。
• -webkit-box-orient:vertical: ボックスのレイアウトを垂直方向に配置し、複数行を有効にします。 text.
• overflow: hidden: 指定された行を超えるテキストを非表示にします。
• text-overflow: ellipsis: 切り詰められたテキストに省略記号を追加します。

これらのプロパティを使用すると、複数行のテキストを実現できます

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

この CSS ソリューションでは、テキストが複数行にオーバーフローし、指定された行数制限に達した場合に省略記号で切り詰められることが効果的に許可されます。

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