CSSの「-webkit-box-orient」が効かない問題の解決法

テキストが複数行になった場合、省略の3点リーダーをつける

テキストが複数行になった場合にCSSで省略の3点リーダーをつけようと思い、2行で省略しようと、-webkit-line-clampを使って省略指定をしてみました。

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

なぜか-webkit-box-orientだけが、反映されず消えてしまい、
3点リーダーが付かず動かないので調べたら解決法がありました。

Autoprefixerに原因があった

-webkit-box-orientを勝手に削除してしまうバグ があるらしいです。
SCSS中で直接Autoprefixerを有効・無効を指定してあげれば解決します。

display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*! autoprefixer: on */
-webkit-line-clamp: 2;
overflow: hidden;

また、SCSSコンパイル時のoutputStyleが compressed になっていると、コメント自体が削除されてしまうので、 /*! コメント */ としてください。