Edited at

複数行テキストの末尾省略をCSSのみで実現する


やりたいこと

複数行テキストの末尾を…(3点リーダー)で省略したい。

このとき、JavaScriptを使わずCSSだけで実現したい。


なんでCSSだけで?

JavaScriptで末尾省略する方法だとある程度の行数のコードを書かないといけない。

また、ライブラリを使う方法もあるが、バージョンアップやjQuery依存など考慮するべき点がいくつかある。

CSSで実現できれば上記のような心配が少なく、保守性を維持しやすいかと思いCSSだけで実現する方法を探した。


実現方法


CSS line-clamp を使う

display: -webkit-box;

overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

メリット

- 少ない行数で実現できる

- 幅が可変でも変な隙間ができたりせず綺麗に表示できる

デメリット

- IE, Firefoxで未対応

- モバイル対応のみならば使える(Android版のFirefoxユーザーもいるが…)

- 使う場合はフォールバックも設定しておくのが望ましい。


参考: https://codepen.io/martinwolf/pen/qlFdp


追記 2019.02.28

@supportsを使って、Firefoxではbefore/afterを使ったやり方、それ以外のブラウザではCSS line-clampでできそう!

https://www.webcreatorbox.com/tech/css-supports

@supportsは指定したCSSプロパティが対応しているブラウザかどうかで条件分岐できる機能です。

これを使えば、以下のようにこの記事で紹介する2つの方法のハイブリッド型が実現できます。

.ellipsis {

display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

@supports not (-webkit-line-clamp: 3) {
/* before/afterを使ったやり方(下記)*/
}

ただし、IEは@supportsを未対応のため、やっぱりIEではCSS onlyは無理みたいです。

でも、マイクロソフトさんも正式に「IE使わないで」勧告していたし、

そろそろいいかなってプロダクトではCSS onlyでいけますね。


before, after要素を使う

.ellipsis {

position: relative;
height: 80px;
overflow: hidden;
line-height: 20px;
}

.ellipsis:before, .ellipsis:after {
position: absolute;
background: #fff;
}

.ellipsis:before {
content: "・・・";
bottom: 0;
right: 0;
}

.ellipsis:after {
content: "";
width: 100%;
height: 100%;
}

copied by http://blog.keisuke11.com/webdesign/word-trim/

メリット

- どのブラウザでも動作する

デメリット

- 行数は多めでハック感もややあり

- テキストの末尾と…(3点リーター)との間に隙間ができることがある(特に幅が可変のとき)

PC対応が必要でどうしてもFirefoxを外せない場合はこちら。

個人的には2つ目のデメリットが看過できないので使いたくない…。


まとめ

Firefoxさん!CSS line-clamp対応してくれー!

(IEはいいです)