CSSで規定の幅から文字数が多いためにはみ出てしまうテキストを三点リーダー(...)で省略する方法です。
今は、複数行でもCSSのみで実装可能ですね。昔はjQueryとか使用してごちゃごちゃやっていた気がします。
古いブラウザなどにきちんと対応する場合は、今でもJavaScript実装がおすすめですが、モダンなブラウザのみが対象であれば、CSSのみのほうが簡単です。
CSSではみ出したテキストを省略する。1行の場合
・overflow: hidden;およびwhite-space: nowrap;と一緒に使う
・text-overflowはBlock要素に対してinline（横方向）にはみ出たテキストに対して効果がある
BLOCK要素サンプル
CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。
CODE
// HTML
<div class="text-overflow" style="max-width: 200px;">
CSSではみ出したテキストを省略するテストです。
</div>
// CSS
.text-overflow {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}TABLEサンプル
table-cell属性でも使用できますが、注意点があります。
指定してあればwidth:100%;などでも構いません。tdからはみ出た段階で省略されます。
CODE
// HTML
<table style="max-width: 200px;">
<tr>
<td class="text-overflow" style="max-width: 200px;">
CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。
</td>
</tr>
</table>text-overflowが効かない？動作しない？
最近はレイアウトを組むときにdisplay:flex;でフレックスを使用するケースが増えてきています。ちょっとしたはまりどころですが、text-overflowが指定されている要素がフレックスだと、テキスト省略が効きません。
複数行でもテキストがはみ出した時に省略する方法
こちらはモダンブラウザのみ対応しています。（chrome,safari）
複数行サンプル
CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。
CODE
// HTML
<div class="text-overflow-lines" style="max-width: 200px;">
CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。CSSではみ出したテキストを省略するテストです。
</div>
// CSS
.text-overflow-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}今となってはdisplay:flex;があるので活躍の場がなくなったフレックスボックスですが、こんな使い道がありましたね。
上記は下記サイトを参考にしています。モダンブラウザ以外の対応方法も記述されています。
【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ
CSS/SASSのおすすめ書籍
CSSやSCSSは基本がわかればあとはGoogle先生で調べた方が早いと思います。CSSの仕組みやSASSの使い方だけわかれば基本はOKです。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
📦