IE11終了…複数行の省略 CSS line-clamp の使い方
フロントエンドエンジニアの茶木です…
IE11が終了して、思い切って使えるようになったCSSがあります。
そのひとつ CSS line-clamp についてです。
「3行超えたら省略の3点リーダー出したい！」
とデザイナーの皆さんに言われたときに、
なるほど、そうですね、複数行の3点リーダー出したいですよね！わかります！ただちょっと不可能ではないんですけど、クロスブラウザでは、完全対応ができなくてですね、1行の省略だったら簡単なんですが、いえ、決して面倒臭がってるわけじゃなくてですね？デザイン上の必要性も理解してますよ？もちろん！ただ、IEで未対応のため、JSを書く必要がありまして、ブロックのサイズが可変だったりすると、リサイズが発生すると収まる文字数も代わりますでしょ？そうすると省略文字数を計算し直すのですが、それが大変というか、もちろん既存のポリフィルが無いわけじゃないんですが、ポリフィルもピンキリでして、決定版がないというか、少々お時間をいただくこともあるかなと思いまして、えへへ、そうなってくると、なかなか簡単じゃなくて、そのなんというか、
といった、歯切れの悪い返事をしていました。今までは。
その理由が 複数行の省略は、line-clamp がIE11 未対応だったからです。
サンプル
line-clamp を使った複数行の省略です。
3行を超えたら省略して3点リーダーを表示します。
これで長文も少し歯切れがよくなりましたね！
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を味わいに来ませんか？
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください！
求人応募してみる！
