💬

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

2022/03/24に公開約800字

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

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

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

-webkit-line-clampで3点リーダを表示する行数を指定する

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

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

だが、なぜか3点リーダーが付かず動かない。困る

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

原因はPostCSSのAutoprefixer

PostCSSのAutoprefixerが悪さしてた。

https://github.com/postcss/autoprefixer/issues/776

-webkit-box-orientが削除されてしまう不具合がある

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

対策

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

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

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

Discussion

ログインするとコメントできます