概要
この記事では、テキストの行末を3点リーダー（・・・）で切り取る方法について説明します。1行のテキストと複数行のテキストで、それぞれ3点リーダーを適用する方法を紹介します。
実装
1行のテキストに3点リーダーを適用する
1行のテキストが要素の幅を超える場合、その部分を省略して3点リーダーを表示するには、以下の CSS プロパティを使用します。
{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
-
overflow: hidden;
コンテンツが親要素を超えた場合、見切れた部分を表示しません。 -
text-overflow: ellipsis;
コンテンツが切り取られる場合、その末尾に・・・を表示します。 -
white-space: nowrap;
テキストを1行に制限し、改行を無効にします。
複数行のテキストに3点リーダーを適用する
複数行のテキストが指定した行数を超える場合、3点リーダーを表示するには、以下の CSS プロパティを使用します。以下は、2行目の末尾に3点リーダーを適用する例です。
{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
-
display: -webkit-box;
flex プロパティのベンダープレフィックスです。 -
-webkit-box-orient: vertical;
コンテンツを縦方向に配置します。 -
webkit-line-clamp: 2;
表示する行数を制限します。この例では2行まで表示し、3行目以降は切り取ります。 -
overflow: hidden;
コンテンツが親要素を超えた場合、見切れた部分を表示しません。
Tailwind CSS を使用する場合
Tailwind CSS を使って、3点リーダーを簡単に実装することも可能です。line-clamp ユーティリティを使うと、指定した行数を超えたテキストに自動的に3点リーダーを付けることができます。
<div class="line-clamp-2">
aaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa・・・
</div>
参照