CSS の -webkit-line-clamp プロパティについて: Days on the Moon

この記事の内容は古びている。この記事が最初に執筆されたのちに、CSS Overflow Module では line-clamp プロパティが定義された。この line-clamp プロパティは max-lines、continue、block-ellipsis プロパティに対する一括指定プロパティである。

結論からいうと、CSS の -webkit-line-clamp プロパティは使わないほうがいい。現状および今後の Web ブラウザでのサポートが望めないからである。

`-webkit-line-clamp` CSS プロパティとは何か

複数行でも3点リーダーをきかせることができるというもの。

このプロパティはどうやって使うか

-webkit-line-clamp プロパティ単体では効果を持たず、他のプロパティと組み合わせて使う。

selector {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

このプロパティは何のために存在するのか

おそらくは Apple 製アプリケーションでの内部的な利用のため。このプロパティは、Safari CSS Reference の Additional Unsupported Properties の項に記載がある。

WebKit provides partial support for a number of properties that are not supported for developer use. This list may include:

Properties designed for Apple internal use, such as properties specific to the way Mail and other applications use WebKit.
Properties that are in a very early stage of development and are not really usable yet.
Properties that are used within WebKit itself and cannot be parsed in a CSS file.
Properties that are parsed for historical reasons, but that are not actually used.

適当に訳すと、

WebKit は、開発者の使用に対してはサポートされないプロパティを、いくつか部分的にサポートしている。このリストには以下を含む:

Apple の内部的な利用 (Mail など、WebKit を使うアプリケーションに固有のもの) のために設計されたプロパティ。
開発のごく初期段階であり、まだ実用に耐えないプロパティ。
WebKit 内部で使われ、CSS ファイルからはパースできないプロパティ。
歴史的な理由でパースはされるが、実際には使われないプロパティ。

このプロパティの開発状況はどうなっているか

このプロパティは -webkit-box、すなわち旧式の flexbox (flexible box) と組み合わせる必要がある。現 flexbox 仕様とは相いれない。このことから、このプロパティは旧 flexbox 時代に内部利用のため、もしくは実験的に実装され、そのまま放置されたものではないかと推測される。実際に上述の文書ではこのプロパティが「サポートされない」ものとして挙げられている。

このプロパティをベンダ接頭辞なしで書く必要があるか

ない。display: -webkit-box というのは旧 flexbox 仕様の値にベンダ接頭辞をつけたものであり、そこからベンダ接頭辞を外して display: box と書いたところで、どのブラウザもサポートしていない。現 flexbox 仕様では display: flex という全く別の値を使うようになっている。なので、

selector {
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

のようにベンダ接頭辞付きのプロパティを併記するのは無意味である。後述するように、line-clamp というプロパティが制定されることもない。

このプロパティは標準化されるのか

line-clamp というプロパティ名では標準化されない。2014 年 6 月の W3C CSS WG のミーティングにおいて、-webkit-line-clamp プロパティのことが議題に上がっている。そこでの結論としては、最大行数の指定とブロックに対する省略記号の問題は別々に議論していこうというものである。

-webkit-line-clamp