CSS | 要素のサイズでテキストを丸めて末尾に3点リーダーを付与する

2020-06-222021-02-08CSS テキスト,CSS

CSSだけで要素のサイズに合わせてテキストを丸めて（省略して）末尾に3点リーダーを付与する方法の紹介です。

テキストを丸める処理は、head内のdescriptionに使う事も多くPHPの出力で行うケースもありますが、コンテンツ要素内であればCSSだけで簡単に実装することも可能となっています。

要素のサイズでテキストを丸めて末尾に3点リーダーを付与

要素のサイズでテキストを丸めて末尾に3点リーダーを付与する実装サンプル

See the Pen CSS only text overflow ellipsis by yochans (@yochans) on CodePen.

サンプルコード

<p class="text-overflow">Hello world Hello world</p>

.text-overflow{
	width: 200px;
	background: #E8F5E9;
	font-size:20px;
	padding:6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

実装に必要な部分のCSSは3つあります。

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

「overflow: hidden;」「white-space: nowrap;」は、文字列が要素の範囲からはみ出る場合に折り返さないようにする設定。

「text-overflow」でテキストを要素の幅に合わせて省略するかどうかの設定で、ellipsisは3点リーダー（省略記号）を付与する指定値となっています。

text-overflowをレスポンシブに対応するには

モバイル端末などでtext-overflowでの省略を画面サイズに合わせてレスポンシブに対応するには単純に「width: 100%;」を指定することで対応することができます。

.text-overflow{
	width: 100%;
	background: #E8F5E9;
	font-size:20px;
	padding:6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

「width: 100%;」を指定することでbodyを含む親要素のサイズに合わせて省略しますので、レスポンシブ対応で一行での丸め込みならば、この方法がシンプルで使いやすいです。

figcaptionなんかに便利

一行での丸め込みはfigure要素のfigcaptionなどサムネイル画像の説明文記述なんかに便利です。

<figure class="thumbnail"><img src=""/><figcaption>aaa</figcaption></figure>

.thumbnail {
	max-width: 200px;
}

.thumbnail figcaption {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

text-overflowで複数行に対応するには

text-overflowは現在複数行後に実行するようには対応していません。

CSSのみで複数行になるテキストの丸め込みを実装するには

  p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
  }

あたりを利用するみたいです。

text-overflowで指定できる値

text-overflowで指定できる値には以下のものがあります。

※2020年現在、clipとellipsis以外はChromeを含む多くのブラウザでは未対応となっています。