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

2 行目の CSS の切り詰め: 詳細な解決策

CSS を使用して 2 行目のテキストの切り詰めを実現することは、明確さを欠く課題となる可能性があります。オンラインのドキュメント。この記事では、この障害を克服するための段階的な解決策を説明します。

目的は、テキスト全体ではなく、テキストの 2 行目の末尾に省略記号 (...) を表示することです。テキストが 3 行目にオーバーフローします。

この効果を実現するには、特定の CSS プロパティを利用します。

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

これらのプロパティは次のように連携して機能します。

• overflow: hidden は、定義された領域内にテキストを保持します。
• text-overflow: ellipsis テキストが使用可能なスペースを超える場合、省略記号を追加します。
• display: -webkit-box および -webkit-line-clamp: 3 テキストが複数行に折り返されるようにしますが、テキストは 3 行に制限されますLines.
• -webkit-box-orient:vertical 行を垂直に配置します。

このソリューションは、Chrome や Safari などの WebKit ブラウザでのみ完全にサポートされていることに注意してください。他のブラウザでは、別のアプローチが必要な場合や、2 行目のテキストの切り捨てが明示的にサポートされていない場合があります。

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