ボックスに収まりきらないテキストを[…]で省略する方法【複数行対応版も解説】

CSS プロパティ text-overflow を ellipsis にするとテキストが溢れた際に省略記号を表示することができます。

2行以上表示させてから省略記号を付けたい場合は、-webkit-line-clamp というプロパティを使うことで実現できます。

解決すること

限られたスペースの中で1行でテキストを表示する必要があるときに、文字数が多くなってしまって端の文字が切れてしまい不格好になってしまったという経験はありませんか?

そのような時にテキストの末尾を省略記号「…」で置き換えることができるCSSプロパティがあります。

解決方法 1: ellipsis を適用する

See the Pen ellipsis の動作確認 by Naoki-Kosuge
(@Naoki-Kosuge) on CodePen.

ブロックコンテナー要素に ellipsis クラスをセットするとテキストが溢れた際に末尾が「…」になります。テキストは折り返しされないため、1行での表示になります。

1行では収まりきらないテキスト
  1. <div class="ellipsis">春は、あけぼの。やうやう白くなりゆく山ぎは少し明りて紫だちたる雲の細くたなびきたる。</div>
ellipsis ユーティリティ
  1. ellipsis {
  2. text-overflow: ellipsis;
  3. overflow: hidden;
  4. white-space: nowrap;
  5. }

text-overflow は溢れた際にどう表示するかを指定するプロパティです。規程では clip が指定されていて、溢れた部分は切り取られます。これ ellipsisに指定すると省略記号「…」を表示するようになります。

  1. text-overflow: ellipsis;

text-overflow はテキストが溢れることを強制するものではないためそれだけでは役に立ちません。overflowwhite-space をそれぞれ hidden, nowrap に指定することで、テキストの溢れを生じさせることができるようになります。

  1. overflow: hidden;
  2. white-space: nowrap;

プロパティのまとめ

text-overflow: ellipsis;テキストが溢れてそれが表示されない際に、ボックスに収まったテキストの末尾に省略記号「…」を表示する。
overflow: hidden;テキストがボックスから溢れた際にボックスに合わせて切り取ります。
white-space: nowrap;テキストを折り返さず1行にします。

解決方法 2: -webkit-line-clamp を使う(IE未対応)

ellipsis による方法は1行でしかテキストを表示することができませんでした。Internet Explorer をサポートしないのであれば、2行以上の表示で 省略記号を表示させることができます。

3行では収まりきらないテキスト
  1. <div class="line-clump-3">春は、あけぼの。やうやう白くなりゆく山ぎは少し明りて紫だちたる雲の細くたなびきたる。夏は、夜。月の頃はさらなり。闇もなほ。螢の多く飛び違ひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。</div>
line-clump-3 ユーティリティ
  1. .line-clump-3 {
  2. display: -webkit-box;
  3. -webkit-box-orient: vertical;
  4. -webkit-line-clamp: 3;
  5. overflow: hidden;
  6. }

-webkit-line-clamp プロパティで表示したい最大の行数を指定します。

  1. -webkit-line-clamp: 3;

-webkit-line-clamp は、display プロパティに -webkit-box もしくは -webkit-inline-box が設定されており、かつ -webkit-box-orient プロパティに vertical が設定されている組み合わせのときのみ使用できます。

  1. display: -webkit-box;
  2. -webkit-box-orient: vertical;