CSSで規定の幅から文字数が多いためにはみ出てしまうテキストを三点リーダー(…)で省略する方法です。
今は、複数行でもCSSのみで実装可能ですね。昔はjQueryとか使用してごちゃごちゃやっていた気がします。
古いブラウザなどにきちんと対応する場合は、今でもJavaScript実装がおすすめですが、モダンなブラウザのみが対象であれば、CSSのみのほうが簡単です。
CSSではみ出したテキストを省略する。1行の場合
text-overflowを使用します。
参考⇒text-overflow | MDN
使用するときには、ちょっとだけ決まり事があります。
・overflow: hidden;およびwhite-space: nowrap;と一緒に使う
・text-overflowはBlock要素に対してinline（横方向）にはみ出たテキストに対して効果がある
BLOCK要素サンプル
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属性でも使用できますが、注意点があります。
table自体にもwidthを指定する必要があります。
指定してあればwidth:100%;などでも構いません。tdからはみ出た段階で省略されます。
| CSSではみ出したテキストを省略するテストです。 |
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が指定されている要素がフレックスだと、テキスト省略が効きません。
なので使用するときはdivなどで囲ってあげるとよいですね。
複数行でもテキストがはみ出した時に省略する方法
こちらはモダンブラウザのみ対応しています。（chrome,safari）
複数行サンプル
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デザイン入門講座
htmlの基礎から学べるのでおすすめ
Web制作者のためのSassの教科書
SASSの基本が学べます。
[…] CSSで長いテキストを(…)で省略する方法:1行と複数行対応 […]