要素の幅を超えたテキストを省略して「…」を表示するには、text-overflow: ellipsisを使います。
一行だけ省略することができます。
※複数行には使えません。
基本CSS
|
1 2 3 4 5 6 7 8 |
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; } |
タイトルなどでの使用する場合
|
1 2 3 |
<p class="ellipsis">とても長いタイトルや文章を省略表示したい場合</p> |
要素の幅指定の指定は必須です。
