言及する価値はありませんが、言及する必要があります: 「CSS テキストが省略記号を超えており、省略記号で置き換えられています」_html/css_WEB-ITnose

CSS のスキルと経験のまとめのような記事を偶然目にしました。その一部は、「CSS コントロール要素内の余分なテキストを置き換えるには省略記号を使用する」というものです。

多くのプロダクトマネージャーは、ページ UI にそのような要件があります。初めてこの機能を使用したときは、Baidu を通じて取得し、それをメモ帳にただ記録したことを今でも覚えています。それ以降は、基本的に原理をまったく勉強せずに、ただ教義として使用しました。全然関係なかったです） 原理も方法もとても簡単ですO(∩_∩)Oははは～）、今日もたまたま遭遇したので一旦休憩とさせていただきます。

上記の機能を実現するために、一般的に使用されるコードは次のとおりです:

p{    width: 100px;    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;}

ここでの P タグの 4 つの CSS 属性はすべて必要です。これらの属性はどのような役割を果たしますか?

width: p タグの幅を設定するために使用されます。幅がない場合、「超過」とは何ですか? p タグの幅が手動で設定されていない場合でも、p タグは親要素を自動的に水平方向に埋めます。これは、いわゆる 100% です。この属性は、特に値が " の場合に優れています。 nowrap" 、なぜこのように言えるのかというと、ブロックレベル要素内のテキストが 1 行、つまり複数行を超える場合、テキストはデフォルトで折り返され、オーバーフローが発生することはありません

; しかし、要素がこの属性を空白 :nowrap に設定すると、テキストは親要素の幅制限を無視し、その結果、以下に示すようにテキスト オーバーフローが発生します。

結果は次のようになります。素晴らしいと言えます。か否か。

overflow: この属性は、要素に含まれる要素 (画像、テキスト、その他の要素など) がその長さと幅の範囲を超えた場合にどうするかを要素に指示します。スクロール バーを表示すべきか、それとも超過部分を非表示にする必要があります。私たちが話している現在のケースでは、余分なテキストを非表示にする必要があるため、overflow:hidden を設定します。

text-overflow: この属性は CSS3 の新しい属性です。公式の説明は次のとおりです:

その値を省略記号に設定する必要があります。これは、余分なテキスト部分を省略記号に置き換えることを意味します。

4 つの属性値を組み合わせて使用​​し、最終的にこの効果を達成します:

コード

実行結果

この記事が私のような「使用主義」の人に役立つことを願っています子供用の靴は助かります