CSS を使用して HTML でテキストの切り詰めを実装する

今回は、CSS を使用して HTML でテキストの切り詰めを実装する場合と、CSS を使用して HTML でテキストの切り詰めを実装する場合の注意事項を紹介します。以下は実際的なケースです。

単一行のテキストの切り捨て

Text-overflow: 省略記号は、誰もがよく知っているものだと思います。単一行のテキストの切り捨てを実現するには、ほんの数行のコードしか必要としません。

div {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;
}

属性はブラウザーでネイティブにサポートされており、主要なブラウザーとの互換性が優れています。欠点は、単一行のテキストの切り捨てのみをサポートし、複数行のテキストの切り捨てをサポートしないことです。

適用可能なシナリオ: 単一行のテキストの切り捨ては実装が最も簡単で、効果が最も高いため、安心して使用できます。

複数行のテキストインターセプトエフェクトの場合、実装はそれほど簡単ではありません。

-webkit-line-clamp は、-webkit-line-clamp 属性を通じて実装

します。具体的な方法は次のとおりです:

div {  display: -webkit-box;  overflow: hidden;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;
}

display、-webkit-box-orient、overflow と組み合わせて使用​​する必要があります:

display: -webkit-box; としてオブジェクトを表示するには、属性と組み合わせる必要があります。柔軟な

ボックスモデル。

-webkit-box-orient; フレックス ボックス オブジェクトのサブ要素の配置を設定または取得するには、属性と組み合わせる必要があります。

text-overflow: ellipsis; 複数行に使用できます。省略記号「...」を使用すると、範囲外のテキストが非表示になります。

効果の観点から見ると、その利点は次のとおりです:

さまざまな幅に応じて調整された応答性の切り捨て

テキストが範囲を超える場合にのみ省略記号が表示され、それ以外の場合は省略記号は表示されません

ブラウザはネイティブに実装されているため、省略記号の位置は正しく表示されます

しかし、-webkit-line-clamp は標準化されていない属性であり、CSS 仕様のドラフトには記載されていないため、欠点も非常に直接的です。つまり、Webkit コアを備えたブラウザのみがこの属性をサポートしています。Firefox や IE などのブラウザはこの属性をサポートしておらず、ブラウザの互換性は良好ではありません。

使用シナリオ: モバイル デバイスのブラウザは Webkit カーネルに基づいているため、互換性が低いことに加えて、切り捨て効果が優れているため、主にモバイル ページに使用されます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

js-xlsxのツールライブラリxlsxUtilsの使い方を詳しく解説

JSの日常よく使う機能を統合

以上がCSS を使用して HTML でテキストの切り詰めを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。