テキストが複数行になった場合、省略の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 になっていると、コメント自体が削除されてしまうので、 /*! コメント */ としてください。