【CSS】三点リーダーで文章を省略して表示
2022-05-24
2022-05-24
はじめに
今回は、3点リーダーでの文章の省略をCSSで実装したいと思います!
実装
■方法1
こちらは、最も単純な方法です。要素の幅に対してはみ出した行の扱いを指定しています。```
.sample_class {
width: 300px; //幅を指定
overflow: hidden; //はみ出したテキストを非表示に
text-overflow: ellipsis; //三点リーダーで表示
white-space: no-wrap //自動改行をしない
}
```
■方法2
こちらは、複数行目以降を省略したい場合の方法です。下記は、3行目以降を省略する実装例です。```
.sample_class{
display: -webkit-box; //要素の折り返しを指定。flexと同義だが、古いios等対策
-webkit-box-orient: vertical; //子要素を縦方向に積み重ね
-webkit-line-clamp: 3; //省略の行数を指定
overflow: hidden; //はみ出したテキストを非表示に
}
```
■フォントについて
実装していく中で、三点リーダーを行の下部に表示したいのにも関わらず、真ん中に表示されてしまう現象に遭遇しました。調べてみると、どうやらfont-familyに指定されているフォントによるもののようです。
こちらを変更すると影響範囲が大きすぎるため、今回はそのままにしておきました。
下記参考記事です。
https://www.koikikukan.com/archives/2013/02/27-012345.php