複数行にも対応！CSS を使ってはみ出した文字を「･･･」で省略する方法 ｜ KLUTCHE範囲内に収まらない文字を「･･･」で省略する方法です。 使うのは CSS のみで、各ブラウザにも対応しています。 長い文章の冒頭だけ表示したいときってあると思います。 実現する方法としては、 ・PHP 等を使ってサーバサイドで文字列を丸める ・text-overflow を使う なんかがあると思います。 PHP なんかでは文字列を指定の幅でトリミングすることを「丸める」と言います。 なんか専門用語的で格好良いので 「ちょっとこの文字列丸めといて」 的に使うことをおすすめします。 しかし、上記2点の欠点として、 ・PHP は文字数指定の省略なので、可変する幅に応じることができない ・text-overflow: ellipsis; は複数行に対応できない が挙げられます。 使う場面が限定されすぎです。 そんな時に使って欲しいが今回の方法です。 デモ デモページ ウインドウの狭くしてもらうとわ
reCatnap ラボ
