まえがき
「複数行の枠に対して、長過ぎる文字列の末尾を省略して三点リーダー（…）を表示したい」と思って調べると、おそらく以下の記事で紹介されているような -webkit-box を使った方法が出てくるかと思います。
ところが、gulpやwebpackでSCSSをコンパイルしている環境においては少し罠があります。
フロントエンドに詳しくない私は小一時間ほどハマってしまったので、同じような状況で困っている方がいたらと思いメモを残します。
「-webkit-box-orient」消える問題
早速私も下記のSCSSをコピペしてきてビルドしてみたのですがどうもうまくいきません。
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
Developer Toolで確認してみたところ、 -webkit-box-orient: vertical; が消えているようです。
なぜかというと、プロジェクトに導入していたAutoprefixerによって削除されてしまっていたのです。
Autoprexierとは、対応したいブラウザとバージョンを指定すると、それぞれの仕様に合わせたベンダープレフィックス(-webkit-、-ms-、-moz-など)を自動的に追加してくれる便利なツールです。
詳細はこちらの記事を読んでいただくと良いかと思います。（というか私もこれを読んで初めて知りました...笑）
そこで、次の3つの対応方法を紹介いたします。
対応方法
① 一時的にAutoprefixerを無効にする方法
これが一番簡単で手っ取り早い方法です。
SCSS中で直接Autoprefixerを有効・無効を指定します。
display: -webkit-box;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 3;
ただし、バージョンが8.4以降であれば次のように書く方が良いでしょう。
display: -webkit-box;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
また、SCSSコンパイル時のoutputStyleを compressed にしていると、このコメント自体が削除されてしまうので、 /*! コメント */ としてあげましょう。
② gulpやwebpack側の設定を変える方法
複数の箇所でこの対応をする必要があった場合には、この方法もありかもしれません。
ただ残念ながら私はどちらにも詳しくないため、解説は他の方にお譲りしたいと思います。
③ Autoprefixerのバージョンを上げる方法
なんと、私がこの問題について調べていたちょうど3日前に、Autoprefixer側がこの問題に対応しました！
コミットログはこちらです。
なので、プロジェクトとしてバージョンを上げることができそうであれば、 9.6.1 以降にアップデートするのが一番良いでしょうか。
あとがき
フロントエンド難しい。。。
（皆さんブラウザ対応とかレスポンシブとかライフサイクルとかSEOとかトレンドだとか本当に全部気にしてるの...？PRにスクショ貼っただけで満足してるのは私だけ...？）