早速、コードから始めましょう。
1. テキストを 1 行だけ表示し、それを非表示にして省略します。
// 1 行のテキストのみを表示し、.element {を省略します。
width: 300px; /* 固定幅を設定する必要があります */
white-space: nowrap; /* 行折り返しなしで強制的に 1 行表示します */
overflow: hidden; /* ボックスの外側の部分を非表示にします */
text-overflow: ellipsis; /* 余分な省略記号を表示します */
}2. 指定した行数のテキストを表示し、非表示にして省略します。
// 複数行表示後は省略 text.element {
width: 300px; /* 固定幅を設定する必要があります */
display: -webkit-box; /* 柔軟なボックス レイアウトを使用します */
-webkit-box-orient: 垂直方向; /* 垂直方向の配置 */
-webkit-line-clamp: 3; /* 3 行を表示します */
overflow: hidden; /* ボックスの外側の部分を非表示にします */
text-overflow: ellipsis; /* 余分な省略記号を表示します */
}複数行のテキストはdisplay: -webkit-box;フレキシブル ボックス レイアウトと-webkit-line-clampを使用して省略され、複数行のテキストが切り詰められます。
注: この方法は、WebKit コア ブラウザ (Chrome、Safari など) に適しています。他のブラウザの場合は、追加のポリフィルのサポートが必要になる場合があります。
その他のソリューション
1. JavaScript を使用してテキスト コンテンツの高さを動的に計算し、切り詰めます。
2. 既存のライブラリを使用します: Clamp.js など
Clamp.js: クロスブラウザーで複数行のテキストを切り詰めるための軽量ライブラリ。
//単一行 $clamp(myHeader, {clamp: 1});
//複数行 $clamp(myHeader, {clamp: 3});
// 利用可能な高さに基づいて行数を自動的に計算 $clamp(myParagraph, {clamp: 'auto'});
//固定高さに基づいて行数を自動的に計算 $clamp(myParagraph, {clamp: '35px'}); 3. CSS フォールバック (部分的な互換性ソリューション)
一部のブラウザでは、 -webkit-line-clamp属性は直接サポートされていませんが、いくつかの単純な CSS を組み合わせて、おおよその効果を実現できます。
。要素 {
display: block; /* ブロックとして表示します */
overflow: hidden; /* 余分なコンテンツを非表示にする */
text-overflow: ellipsis; /* 余分な省略記号を表示します */
line-height: 1.5em; /* 行の高さを設定します */
max-height: 4.5em; /* 3 行の最大高さ、3 行 * 1.5 行の高さ = 4.5em */
white-space:normal; /* 通常のテキストの折り返しを維持します */
}このスキームは、すべての場合において正確な複数行の切り捨てを実現できるわけではありませんが、基本的な複数行テキストの省略表示をサポートするのには依然として適しています。
CSS テキストが制限を超えた後の省略記号の非表示と表示に関するこの記事はこれで終わりです。その他のブラウザ互換性ソリューションについては、downcodes.com で以前の記事を検索するか、引き続き以下の関連記事を参照してください。今後とも downcodes.com をさらにサポートしていただければ幸いです。