ブログの一覧ページなどで、ボックスの高さを揃えるために決まった行数の中にテキストを収めたいときに使う便利なタグ。
PHPやJSなんかで無理やり収めてしまうよりも、こちらの方がスマートで便利！
1行に収める場合
text-overflow: ellipsis;を使う
1行に収めるときはtext-overflow: ellipsis;で、はみ出したテキストの処理を指定してあげるだけ。
ellipsisは、省略記号ということなので、はみ出した部分は省略記号を表示してね、ということになる。
このellipsisは他にもclip、"自由文字"、fadeと指定することができる。
text-overflow - CSS: カスケーディングスタイルシート | MDN
.text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}行数を指定して収める場合
-webkit-line-clampを使う
-webkit-line-clampで行数を指定するだけのシンプル設定。
これでピッタリ収まってくれるので、めちゃくちゃ重宝します。
.text {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* ここで行数を制限 */
}