とあるweb屋の仕事術

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

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

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

一覧表示のUIでよくある、テキスト省略のTipsです。

 

 

三点リーダー「...」が実現できるCSSプロパティ

CSSでは、指定した領域をはみ出したときに、テキストを三点リーダー「...」で省略するプロパティがありますよね。

developer.mozilla.org


ただこちら、1行のテキストにしか対応できません。複数行でいいかんじの文字数で省略するのには使えません。不便を感じたことがあるデザイナーが多いのではないでしょうか。そこで登場したのが「-webkit-line-clamp」。 

 

 

複数行の省略プロパティ「-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