【CSS】三点リーダーで文章を省略して表示

はじめに

今回は、3点リーダーでの文章の省略をCSSで実装したいと思います！

実装

■方法1

こちらは、最も単純な方法です。要素の幅に対してはみ出した行の扱いを指定しています。
```
.sample_class {
  width: 300px;　//幅を指定
  overflow: hidden;　//はみ出したテキストを非表示に
  text-overflow: ellipsis;　//三点リーダーで表示
  white-space: no-wrap　//自動改行をしない
}
```

■方法2

こちらは、複数行目以降を省略したい場合の方法です。下記は、３行目以降を省略する実装例です。
```
.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

終わりに

三点リーダーは複数の実装方法がありますが、対応する予定のブラウザ・フォント等考慮して選択する必要がありそうです。