line-clamp | WebworksTips

長い文章の最初の数行のみを表示したい際、ボックスの高さではなく「3行表示」など行数で指定したい場合に利用する。
display に -webkit-box または -webkit-inline-box、overflow に hidden が設定されている場合に有効。Firefox の場合は -webkit-box-orient に vertical の設定も必要である。

<div class="example-box">
Once Upon a time, there lived an old man and an old woman in a small village.
The man went to the mountain to gather firewood.
The woman went to the river to wash their clothes. 
</div>

.example-box {
  width: 20rem;
  border: 1px solid #999;
  padding: .2rem;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 制限したい行数が3の場合 */
}