今回は、CSS を使用して HTML でテキストの切り詰めを実装する場合と、CSS を使用して HTML でテキストの切り詰めを実装する場合の注意事項を紹介します。以下は実際的なケースです。
Text-overflow: 省略記号は、誰もがよく知っているものだと思います。単一行のテキストの切り捨てを実現するには、ほんの数行のコードしか必要としません。div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
ボックスモデル。
-webkit-box-orient; フレックス ボックス オブジェクトのサブ要素の配置を設定または取得するには、属性と組み合わせる必要があります。 text-overflow: ellipsis; 複数行に使用できます。省略記号「...」を使用すると、範囲外のテキストが非表示になります。 効果の観点から見ると、その利点は次のとおりです: さまざまな幅に応じて調整された応答性の切り捨てテキストが範囲を超える場合にのみ省略記号が表示され、それ以外の場合は省略記号は表示されませんブラウザはネイティブに実装されているため、省略記号の位置は正しく表示されますしかし、-webkit-line-clamp は標準化されていない属性であり、CSS 仕様のドラフトには記載されていないため、欠点も非常に直接的です。つまり、Webkit コアを備えたブラウザのみがこの属性をサポートしています。Firefox や IE などのブラウザはこの属性をサポートしておらず、ブラウザの互換性は良好ではありません。 使用シナリオ: モバイル デバイスのブラウザは Webkit カーネルに基づいているため、互換性が低いことに加えて、切り捨て効果が優れているため、主にモバイル ページに使用されます。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 関連書籍:
js-xlsxのツールライブラリxlsxUtilsの使い方を詳しく解説
以上がCSS を使用して HTML でテキストの切り詰めを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。