文章の任意の行で文字省略を3点リーダーでなくグラデーションで

Result

長い文章を自動で省略するやつです。

CSSだけで実装する場合、1行ならtext-overflow: ellipsis;、複数行ならline-clampが一般的ですが、そもそも3点リーダーが嫌だ、という要望には対応できません。

そこで、第3の選択肢としてmaskとcalcを使ってグラデーションで省略する方法が紹介されていたので備忘録。

css

:root {
  --base: 1.35; 
}

.card {
  font-size: calc(1rem * var(--base));
  line-height: var(--base);
  max-width: 35ch;
  padding: calc(1rem * var(--base));
}
.card p {
  max-height: calc( 4rem * var(--base)); 
  overflow: hidden;
  -webkit-mask: 
    linear-gradient(#000 0 0) top/100% calc(100% - calc(1rem * var(--base) + 1px)) no-repeat,
    linear-gradient(to left, #0000, #000 80%) bottom / 100% calc(1rem * var(--base) + 1px) no-repeat;
}

この場合、文字のサイズや文字間などによって微調整が必要になるので汎用的とは言えませんが、一応CSSのみで実装可能です。

html

<div class="card">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore consectetur temporibus quae aliquam nobis nam accusantium, minima quam iste magnam autem neque laborum nulla esse cupiditate modi impedit sapiente vero?</p>
</div>

via

CSS-Tricksの記事が元ネタですが、コードを参考にしたのはコメント欄です👇
Recreating MDN’s Truncated Text Effect