😺

n行でellipsisにしたいとき... Tailwindのline-clampが最高

2024/07/04に公開

Chakra-UIでいうTextのnOfLinesです。

<p className="max-w-full line-clamp-3">
  n行でellipsisにしたい n行でellipsisにしたい n行でellipsisにしたい n行でellipsisにしたい n行でellipsisにしたい n行でellipsisにしたい n行でellipsisにしたい
</p>

とすると...

3行で割愛...されます

中のCSSはどうなっているかというと...

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

-webkit-line-clampが最高という話でした。
ちなみに -webkit-line-clamp: none 以外は全てのブラウザで対応されてそうでした。
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

Discussion