CSS はテキストの 2 行目に省略記号を作成できますか?

2 行目の CSS 省略記号: 実現可能ですか?

CSS では、text-overflow: ellipsis は、切り詰められたテキストを示すために広く使用されています。省略記号 (...)。ただし、複数行のテキスト ブロックの 2 行目に省略記号を実装することは、長い間課題でした。

この効果を実現するには、text-overflow に依存するのではなく、-webkit-line- の使用を検討できます。クランプ特性。このプロパティは、ブロック コンテナー内に表示される行数を制限します。これを display: -webkit-box および -webkit-box-orient:vertical と組み合わせることで、テキストを特定の行数に制限できます。確実にクリッピングするには、overflow: hidden が推奨されます。

次のコード スニペットは、このアプローチの例です。

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

この手法では、-webkit プレフィックスを利用して、Webkit ブラウザとの互換性を確保します。ただし、この特定の組み合わせのサポートはブラウザのバージョンによって異なる場合があることに注意してください。

以上がCSS はテキストの 2 行目に省略記号を作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。