IE11終了…複数行の省略 CSS line-clamp の使い方

フロントエンドエンジニアの茶木です
IE11が終了して、思い切って使えるようになったCSSがあります。

そのひとつ CSS line-clamp についてです。

「3行超えたら省略の3点リーダー出したい!」

とデザイナーの皆さんに言われたときに、

なるほど、そうですね、複数行の3点リーダー出したいですよね!わかります!ただちょっと不可能ではないんですけど、クロスブラウザでは、完全対応ができなくてですね、1行の省略だったら簡単なんですが、いえ、決して面倒臭がってるわけじゃなくてですね?デザイン上の必要性も理解してますよ?もちろん!ただ、IEで未対応のため、JSを書く必要がありまして、ブロックのサイズが可変だったりすると、リサイズが発生すると収まる文字数も代わりますでしょ?そうすると省略文字数を計算し直すのですが、それが大変というか、もちろん既存のポリフィルが無いわけじゃないんですが、ポリフィルもピンキリでして、決定版がないというか、少々お時間をいただくこともあるかなと思いまして、えへへ、そうなってくると、なかなか簡単じゃなくて、そのなんというか、


といった、歯切れの悪い返事をしていました。今までは。

その理由が 複数行の省略は、line-clamp がIE11 未対応だったからです。

サンプル

line-clamp を使った複数行の省略です。
3行を超えたら省略して3点リーダーを表示します。
 

なるほど、そうですね、複数行の3点リーダー出したいですよね!わかります!IE11が終了した今ならば、line-clamp で、CSSだけでも省略できそうですね、たしかに、たしかに。ただ display: -webkit-box を使う点や、 box-orient: vertical という見慣れないプロパティがあって、二の足を踏んでいたというか、いえ、決して面倒臭がってるわけじゃなくてですね?デザイン上の必要性も理解してますよ?使用例が増えてくれば安心して使えるようになると思うんですが、それまでは、なんとなく怖いですよね?そのなんというか、


これで長文も少し歯切れがよくなりましたね!

CSS構成

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

簡単な解説

-webkit-line-clamp: 3 が収める行数です。

注意点

-webkit の prefix が必要です。autoprefixer を適用している場合など、うまく動かないときは要注意です。

参考

https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

投稿者 Chaki Hironori

webライターもやってるフロントエンドエンジニアです。Reactは自信があります。またデザイン畑の出身で、気持ちのいいアニメーションやインタラクティブな表現は丁寧に手掛けます。好きなものは中南米の遺跡で、スペイン語が少しできます。