はじめに

Webサイトをコーディングする際に、CMSなどで動的にコンテンツを表示する場面は多々あるかと思います。その際に、長いテキストの場合にテキスト行が多くなりデザインが崩れてしまう場合がよくあります。

この記事では、CSSのtext-overflow: ellipsisを使って長いテキストを省略する方法を紹介します。

長いテキストを省略する方法

text-overflow: ellipsisを使用して長いテキストを省略するための基本のCSSは次のようになります。

.ellipsis {
  white-space: nowrap; // テキストを折り返さない
  overflow: hidden; // はみ出した部分を非表示
  text-overflow: ellipsis; // はみ出した部分を「...」で表示
}

• white-space: nowrap;：テキストを折り返さないようにするため設定します。
• overflow: hidden;：はみ出した部分を非表示にします。
• text-overflow: ellipsis;：はみ出した部分を「...」で表示します。

「...」が表示されない場合のハマりポイント

text-overflow: ellipsisを指定していても、「...」で省略されない場合は、次の点を確認してみてください。

1. widthなどで幅が指定されてない
   コンテンツの幅が決まってないと、はみ出す状態にならないので、幅を指定してみてください。
2. white-space: nowrap;が指定されていない
   折り返されてしまうと、省略記号ではなく2行になるので忘れないようにしてください。
3. インライン要素では効かない
   spanなどのインライン要素のままだと効かないことがあります。inline-blockかblockを指定しましょう。

1行の場合のデモ

次はテキストが1行の場合のデモになります。
テキストが長い場合に「...」で省略されるのが確認できるかと思います。

複数行で省略する方法

text-overflow: ellipsisのみの指定だと、1行のみの省略になります。複数行に対応したい場合は、次のように記載しましょう。

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; // 2行の場合
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

複数行で省略したい場合は、-webkit-line-clampを指定しましょう。この数値で省略する行数を指定できます。また、display: -webkit-boxと-webkit-box-orient: vertical;を指定する必要があります。

複数行になるので、white-space: nowrap;は指定しなくても大丈夫です！

2行で省略するデモ

テキストが2行で省略されるデモになります。

実際の利用シーン

text-overflow: ellipsisを使用した、利用シーンは次のようになるでしょう。

まとめ

CSSのtext-overflow: ellipsisを使用して、テキストが長くなりすぎた場合に、省略記号「...」を表示する方法を紹介しました。

「テキストが長くて、デザイン通りにならない」ときに、ぜひ活用してみてください！

参考

• text-overflow - MDN