つい最近まで知らなかった便利CSS

直近の案件で、一行しか表示領域のない部分で文末を「…」にしたい場面がありました。

パッと思いついたのは、jsで文字数を制御してカットした文の末尾に「…」を付与する方法でしたが、めんどくさかったのでなんとなくGoogle先生に聞いてみたところ、、、

・text-overflow: ellipsis;
https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow

こんなもの見つけました。
なんとcssのみで上記の要件を実現できるのです。
(なぜ今まで一度もここに辿りつかなかった?)

overflow: hidden;
white-space: nowrap;

こちらのcssを合わせて使用する必要があり、一行のテキストにしか利用できないものではありますが、スマホ表示など使い所がありそうです。

昨今のJavaScriptの発展は目まぐるしいものがありますが、
こういった発見があるとやはりCSSも奥が深く面白いなと思います。