CSS を使用して 2 行目のテキストを切り詰めるにはどうすればよいですか?

CSS の特定行のテキストの切り詰め: 省略記号の謎を解く

元の質問:

「どうすれば達成できますか?」インターネットで検索したにもかかわらず、特にCSSを使用して2行目のテキスト省略記号を見つけました。 "

答え:

CSS には特定の行のテキストを切り詰める直接的な方法はありませんが、Webkit ブラウザーでこの効果を実現するには次のようにします。次のCSSプロパティ:

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

説明:

• オーバーフロー: 非表示: このプロパティは、コンテンツがコンテナーの境界を越えてオー​​バーフローするのを防ぎます。
• text-overflow: ellipsis: このプロパティは、テキストが使用可能な範囲を超える場合に省略記号 (...) を使用するようにブラウザーに指示します。 space.
• display: -webkit-box: このプロパティは、コンテナーを Webkit ボックス モデルに設定します。これにより、追加のスタイル オプションが可能になります。
• -webkit-line-clamp: 3: これこのプロパティは、コンテナを 3 行のテキストに制限します。
• -webkit-box-orient:vertical: このプロパティは、ボックス モデルの方向を垂直に設定し、複数行に折り返すテキスト。

ブラウザのサポート:

このソリューションは、Safari、Chrome、Microsoft などの Webkit ブラウザでのみサポートされていることに注意してください。エッジ。

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