【CSS】何行以上「…」をjs無しで実装

2023年08月14日

この記事は約1分で読めます。

何文字以上「…」や何行以上「…」ってjsでやろうとすると結構手間だよね。

jsでやろうとすると文字数半角・全角を分けて数えて、n文字以上になったらそれ以上を切り捨てて、「…」を追加して表示する。

でもブラウザやデバイスや横幅によって上手く行数が合わなくなったりする。
これをCSSでスッキリ解決してくれるのが今回ご紹介する方法。
行数をしていしてその行の最後に「…」を追加してくれる便利な書き方。

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* ３行表示 */