要素の高さを変えたくない場合は、はみ出した文字を省略する「…」<CSS/スタイルシート>

レスポンシブのページやiframe(インラインフレーム)で表示させるページなどで、要素の高さを変えたく場合に文字数を省略させるCSS/スタイルシート。

ECサイトのランキングなどで商品名などを省略させたい場合などに使えます。

要素からはみ出した部分は「三点リーダー(…)」となります。

省略させる基本のCSS/スタイルシートは

text-overflow: ellipsis;

実際に使用する場合ははみ出た部分を隠す「overflow: hidden;」とHTML内の空白が影響されないようにする「white-pace: nowrap;」と組み合わせて使用します。

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

 

コメント

タイトルとURLをコピーしました