💬

CSSで-webkit-line-clampがきかない原因は、Autoprefixer が悪さしてるかも

2022/03/24に公開

テキストが複数行で長くなったときに、省略の3点リーダー付ける

CSSで、テキストが複数行で長くなったときに省略の3点リーダー付ける対応をやってるのですが、
CSSが効かず、上手く動作しなかったので共有します。

Vue/Nuxtを使ってるシステムで、長いテキストを複数行で省略して、三点リーダーを付けてほしいとの要望がありまして、Webで調べてみると、なるほど「line-clamp」ってやつを使えば簡単にできそうということがわかりました。

2行で省略しようと、-webkit-line-clampを使って省略指定をしてみました。

   display: -webkit-box;
   -webkit-line-clamp: 2; //3点リーダを表示する行数を指定
   -webkit-box-orient: vertical;
   overflow: hidden;

CSS効かなくて、動作せず、いろいろ調べた結果

PostCSSのAutoprefixerの特定のバージョンに、
-webkit-box-orientを勝手に削除してしまうバグがあるらしいです。

対応としては以下のようにする。

   /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;

誰かのお役に立てれば幸いです。