CSSでテキストを省略する(ellipsis...)

Webアプリケーションを使用していると、テキストの長さがコンポーネントに沿わないことはよくあります。

今回は、そのような場合に頻繁に使用されるtext-overflow: ellipsis;についてまとめてみました。

CSSの記述には、TailwindCSSを使用しています。

truncate

テキストがコンテナからはみ出さないように省略することができます。

<div class="w-20">
  <p class="truncate">Hello, World!</p>
</div>

Text Overflow - Tailwind CSS

text-wrap

テキストがコンテナからはみ出さないように折り返すことができます。

<div class="w-20">
  <p class="text-wrap">
    Hello, World! Hello, World! Hello, World! Hello, World! Hello, World!
  </p>
</div>

Text Wrap - Tailwind CSS

line-clamp

複数行を表示しつつ、指定した行数で省略することができます。

Line Clamp - Tailwind CSS