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

解決すること

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

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

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

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

<div class="ellipsis">春は、あけぼの。やうやう白くなりゆく山ぎは少し明りて紫だちたる雲の細くたなびきたる。</div>

ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

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

  text-overflow: ellipsis;

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

  overflow: hidden;
  white-space: nowrap;

プロパティのまとめ

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

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

<div class="line-clump-3">春は、あけぼの。やうやう白くなりゆく山ぎは少し明りて紫だちたる雲の細くたなびきたる。夏は、夜。月の頃はさらなり。闇もなほ。螢の多く飛び違ひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。</div>

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

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

  -webkit-line-clamp: 3;

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

  display: -webkit-box;
  -webkit-box-orient: vertical;