一覧画面で一覧しているアイテムの説明をちょっと出したい、ということがよくあります。テンプレートエンジンやJavaScriptでの切り詰めではなく、CSSでの切り詰めも当たり前になってきました。経験的にはこの記事にある1行テキストの省略、複数行テキストの省略、表の省略の3つがあれば、たいていのケースはカバーできるでしょう。
CSSで文字を省略表示する方法まとめ
1行テキストを省略表示する
<span>長いテキスト</span>span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}widthが決まらないと省略表示できないので、多くのケースを想定して width: 100% を追加しておいてもいいと思います。
text-overflow - CSS: カスケーディングスタイルシート | MDN
複数行テキストを省略表示する
<span>長いテキスト</span>span {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}何行で切り取るかを都度指定する必要があるのでこのままだと使いにくいでしょう。現実的には、SCSSであればmixinにする、Reactであればpropsに行数を渡すなどの工夫が必要になると思います。
-webkit-line-clamp - CSS: カスケーディングスタイルシート | MDN
table内で省略表示する
td {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 0;
}こちらの記事で書いていました。