今回は、下記例示のようにCSSで規定の幅から文字数が多いためにはみ出てしまうテキストを省略する方法です。
See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.
下記のコードをいれるだけで、長い文章を「…」に省略してくれます。
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}このように、text-overflow プロパティを指定することにより、文字が既定の幅からはみ出さずに省略する事が出来ます。
これを使うには、以下の設定と組み合わせる必要があります。
widthプロパティで幅を設定
overflowプロパティをvisible 以外に設定
white-spaceプロパティをnowrapに設定