とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

メルカリPCサイトに学ぶ。複数行のテキストを省略して末尾...の3点リーダーに代わるホワイトアウト省略方法

メルカリPCサイトに学ぶ。複数行のテキストを省略して末尾...の3点リーダーに代わるホワイトアウト省略方法

一覧表示のUIでよくある、

テキスト省略のTipsです。

 

CSSでは、指定した領域をはみ出したときに、

テキストを三点リーダー「...」で省略する

プロパティがありますよね。

developer.mozilla.org

 

ただこちら、1行のテキストにしか対応できません。

複数行でいいかんじの文字数で省略するのには

使えません。不便を感じたことがあるデザイナーが

多いのではないでしょうか。

そこで登場「-webkit-line-clamp」。

 

developer.mozilla.org

 

こちらは複数行に対応したプロパティ。

待ってました...!

Can I use... Support tables for HTML5, CSS3, etc

IEを無視すれば、「-webkit-line-clamp」プロパティで

解決は可能です。

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

このとおりIEは...つかなくていいじゃん、ということで

解決ではありますが、この件少し深堀りして...

 

少し前まで 「-webkit-line-clamp」は

Firefox は非対応でした。なので、

擬似要素を用いて「...」を表現する

方法が模索されてきました。

けっこうめんどくさいんですよね。

がんばればそれっぽいのはできますが、

 

 

文章・文字列の組み合わせ微妙にズレがでてしまって

完璧とは言えないです。

 

JavaScript を使ってやる方法もありますが、

一覧表示で件数が多いページでは、処理が重くなったり

することもあり避けたいところです。

 

個人的にはPHPでやる方法をおすすめしたいですが、

絶対に役に立つ。Webデザイナーが使えるとはかどるPHP「文字数制御」 - とあるweb屋の仕事術

 

省略方法はなにも「...」だけではない、

というところに着目して、

「...」をつけない形で省略するかたちを

採用するのもひとつの手です。

 

メルカリのPCサイトのトップで

採用されている方法を紹介します。

https://www.mercari.com/jp/

さっそくスクショを。

メルカリ PCサイトでのテキスト省略

メルカリ PCサイトでのテキスト省略

 

見て分かるとおり、メルカリのPCサイトでは

省略に「...」は使用されておらず、

フェードアウト/ホワイトアウトする方法を

採用しています。この形だとズレも気にならずに

クロスブラウザに対応可能です。

疑似要素で対応しているだけなので、

実装方法もシンプルです。

 

以下のサイトでフェードアウト/ホワイトアウト型の方法が

紹介されていますので参考にどうぞ。

[フロントエンド] 文章の文末を省略するためCSS実装を3つ(1行の場合と、複数行の場合) - YoheiM .NET