今回は、下記例示のように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に設定
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。