【CSS】行末を三点リーダーで省略する

CMSなどでサイトを構築すると、
運用後のコンテンツ量がバラバラになるので、
デザイン崩れを抑えるために行数を設定しておき、溢れた分は三点リーダーなどで
省略しておくのがスマートなのではないかと思っています。

一行版

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

複数行版

最後の2が行数に対応する部分なので、三行であれば3に変更などすると行数を変更できます。

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

参考:https://and-ha.com/coding/clamp/

関連記事

コメントを残す

*