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

CSS での省略記号による複数行のテキストの切り捨て

読みやすさを維持しながら長いテキストを圧縮する必要性は、Web デザインにおける一般的な課題です。 CSS には、省略記号でテキストを切り詰めるための text-overflow プロパティが用意されていますが、通常、これは単一行のシナリオに適用されます。テキストの 2 行目に省略記号を適用することは可能ですか?

技術的なジレンマ

この例では、省略記号がテキストの 2 行目に表示されることが望ましい効果です。 2行目。ただし、デフォルトの動作では、提供されている HTML マークアップに示されているように、最初の行のテキストが切り捨てられます。

<p>I hope someone could help me. I need 
an ellipsis on the second line of...</p>

Webkit Browsers 用のソリューション

while CSS複数行の省略記号はネイティブにサポートされていませんが、Webkit ベースのブラウザ (Safari やクロム）。次の CSS スニペットは、目的の効果を実現します:

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

実装

スニペット内の CSS プロパティは次のように連携して機能します:

• overflow: hidden は、テキストが指定された領域からはみ出すことを防ぎます。 area.
• text-overflow: ellipsis は省略記号の切り捨てを有効にします。
• display: -webkit-box および -webkit-line-clamp: 3 は、表示されるテキスト行の数を 3 行に制限します。
• -webkit-box-orient: テキスト行を垂直に配置します

ブラウザの互換性

このソリューションは Webkit ブラウザでのみ機能することに注意することが重要です。他のブラウザではこのアプローチがサポートされていない可能性があります。ただし、指定されたコンテキストでの複数行の省略記号の信頼できる方法が提供されます。

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