1 行または複数行のテキストがオーバーフローしたときに省略記号を表示する CSS を実装する方法

1 行または複数行のテキストがオーバーフローしたときに省略記号を表示する CSS を実装する方法

1. 単一行オーバーフロー

1. 1 行がオーバーフローした場合、超過部分は表示されます...または、遮断されます。前提は幅でなければなりません。
CSS: {width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}、クリップとしてインターセプトされます。

実装コード:

幅:300ピクセル;    
オーバーフロー: 非表示;    
テキストオーバーフロー:省略記号;    
whitewhite-space: nowrap;

効果は以下のようになります。


ただし、このプロパティは、単一行テキストのオーバーフローに対する省略記号の表示のみをサポートしています。複数行テキストのオーバーフローに対して省略記号を表示したい場合はどうすればよいでしょうか。

次に、次のように複数行のテキストがオーバーフローしたときに省略記号を表示することに焦点を当ててみましょう。

2. 複数行オーバーフロー

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

実施方法:

ディスプレイ: -webkit-box;    
-webkit-box-orient: 垂直;    
-webkit-line-clamp: 3;    
オーバーフロー: 非表示;

効果は以下のようになります。


適用範囲:

WebKit の CSS 拡張プロパティが使用されるため、この方法は WebKit ブラウザとモバイル デバイスに適用できます。

注記:

1.-webkit-line-clamp は、ブロック要素に表示されるテキストの行数を制限するために使用されます。 この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります。共通の組み合わせプロパティ:
2.display: -webkit-box; オブジェクトを弾性ボックス モデルとして表示するには、これをプロパティと組み合わせる必要があります。
3.-webkit-box-orient は、伸縮ボックス オブジェクトの子要素の配置を設定または取得するプロパティと組み合わせる必要があります。

実施方法:

p{位置: 相対; 行の高さ: 20px; 最大の高さ: 40px; オーバーフロー: 非表示;}    
p::after{content: "..."; position: absolute; bottombottom: 0; rightright: 0; padding-left: 40px;    
背景: -webkit-linear-gradient(左、透明、#fff 55%);    
背景: -o-linear-gradient(rightright, 透明, #fff 55%);    
背景: -moz-linear-gradient(rightright, 透明, #fff 55%);    
背景: 線形グラデーション(右から右、透明、#fff 55%);    
}

適用範囲:
この方法は応用範囲が広いですが、テキストが行を超えない場合は省略記号が表示されます。この方法は、js と組み合わせて最適化できます。

注記:

1. 高さを行の高さの整数倍に設定して、高さを超えるテキストが表示されないようにします。
2. p::after にグラデーション背景を追加すると、テキストが途中までしか表示されないのを防ぐことができます。
3. IE6-7 ではコンテンツが表示されないため、IE6-7 と互換性を持たせるにはタグを追加する必要があります (例: <span>…<span/>)。IE8 と互換性を持たせるには、::after を :after に置き換える必要があります。

123WORDPRESS.COM 編集者は次のように付け加えています:

IEベースのブラウザではline-heightとheightを定義する必要があり、-webkit-line-clampは数行を意味します。例えば

行の高さ: 20px;

最大高さ: 40px;

ディスプレイ: -webkit-box;

-webkit-box-orient: 垂直;

-webkit-line-clamp: 2;

オーバーフロー: 非表示;

-webkit ラインクランプ

-webkit-line-clamp は、CSS ドラフト仕様には記載されていない、サポートされていない WebKit プロパティです。
ブロック要素に表示されるテキストの行数を制限します。 この効果を実現するには、他の特殊な WebKit プロパティを組み合わせる必要があります。共通の組み合わせプロパティ:
display: -webkit-box; は、オブジェクトを弾性ボックス モデルとして表示する必須属性です。
-webkit-box-orient は、フレックス ボックス オブジェクトの子要素の配置を設定または取得するプロパティと組み合わせる必要があります。
text-overflow を使用すると、複数行のテキストの場合に、範囲を超えたテキストを省略記号「...」で非表示にすることができます。

<<:  Navicatをサーバー上のdockerデータベースに接続する方法

>>:  CSS scroll-snap スクロールイベント停止と要素位置検出の実装

推薦する

CSS 画面サイズ適応実装例

CSS 画面サイズの適応を実現するには、まず CSS3 @media メディア クエリを導入する必要...

MySQL で最大接続数を正しく変更する 3 つの方法

MySQL データベースをインストールすると、デフォルトの MySQL データベースの最大接続数が ...

CSS 向け SASS スタイル プログラミング ガイド

SASS を使用する開発者が増えるにつれて、SASS コードの数に注意する必要があります。 SASS...

MySQL からエクスポートされた scv ファイル内の文字化けやジャンプ行の問題をすばやく解決します

仕事上の理由により、完全なオンライン化(​​つまり、すべてのデータがオンラインで完了し、インポートや...

HTML テーブルの空白セル補完を実装する方法

私が初めて Web 開発を独学で学んだ頃は、いわゆる DIV/CSS レイアウトはなく、テーブル レ...

MySQL Limitパフォーマンス最適化とページングデータパフォーマンス最適化の詳細な説明

MySQL Limit はセグメント内のデータベース データをクエリでき、主にページングで使用されま...

jsはユーザーのページ操作を記憶するためにクッキーを使用します

序文開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇すること...

TypeScript 開発のための 6 つの実用的なヒント

目次1. 開発前にエンティティの種類を決定する2. インターフェースをリクエストするときは、使用する...

docker view container log コマンドの実装

なぜログを読む必要があるのでしょうか?たとえば、コンテナの起動に失敗したがプロンプトが表示されない場...

div ボックス モデルの使用経験の概要

ボックスモデルの計算<br />マージン + ボーダー + パディング + コンテンツC...

MySQLはデフォルトのエンジンと文字セットの詳細を変更します

目次1. データベースエンジン1.1 ビューデータベースエンジン1.2 デフォルトのデータベースエン...

無効にしてHTMLフォーム入力を送信した後にフォーム値が取得されない問題を解決する方法

フォーム入力ボックスの入力をdisable属性に設定して送信すると、入力ボックスの値を取得できなくな...

リアクトルーティングガード(ルーティングインターセプション)の実装

React は Vue とは異なります。ルートにメタ文字を設定することでルートインターセプションを実...

Ubuntuはカーネルモジュールをコンパイルし、その内容はシステムログに反映されます。

目次1.Linuxログインインターフェース2. コードを書く3. Makefileを書く4. コンパ...