line-clamp / -webkit-line-clamp とは【CSS】

line-clamp / -webkit-line-clamp プロパティ

line-clampは、長い文章がboxから見切れるときに、文書末尾が省略され、三点リーダー「…」で終わります。

続きがあることを示唆できる表現ですね。

-webkit-line-clamp: 3;

line-clampの使用条件

同時に使用しなければならないCSSプロパティがあります。

• display: -webkit-box;
• -webkit-box-orient: vertical;

CODE

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

使用状況

Can I use line-clamp?

注意事項:非標準のプロパティを使用している

-webkit-box : 非標準。flexを指定するのかな。”-webkit-box”を検索すると”box-flex”がかかります。

-webkit-box-orient : 非標準。コンテンツの向きを指定する。

感想

非標準のプロパティが多いのであんまり使いたくないなと思いました。

いつか、line-clampが勧告されることに期待します。

注意事項:paddingで位置ずれ

padding-bottomの値次第では、隠したい文章が見えてしまうことがあるようです。

padding-bottomを微調整しましょう。

line-heightやfont-sizeも含めて微調整すると良きかもしれません。

続きの文字が見えてしまっている例

↓

修正例

※ブラウザ、フォントの違いで意図しない結果になる場合があります。