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

2017-08-24_00h03_35 ガジェット総合
Result
See the Pen
MDN’s cool truncation by kachibito (@kachibito)
on CodePen.
長い文章を自動で省略するやつです。
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(--b

リンク元

コメント

タイトルとURLをコピーしました