【CSS】テキストの行数を制限する

2024年9月28日

投稿のタイトルとか本文の表示をＣＳＳで制限したいなぁ･･･

というわけで今回はCSSでテキストの行数を制限する方法についてご紹介いたします。
以前、WordPressでテキストの文字数を制限する方法についてご紹介しました↓

【WordPress】本文の表示文字数を制限する方法

今回は文字数ではなく行数での指定になります。
行数なので、レスポンシブでデバイス幅が狭くなりテキストの改行が始まっても
テキストが下に広がることがなくなり、レイアウトが崩れたりしません！

CSSでテキストの行数を制限する

以下の画像を見てください。

上が1900pxでの表示、下が758pxでの表示になってます。
タイトルは1行、本文は2行の指定にしているのでそれを超える場合は
3点リーダーが表示されるようになってます。これをCSSで実現していきます！

行数を指定する（1行）

ではまずはタイトルで使用している1行の指定についてご紹介します。
今回使用するプロパティは3つです。

・white-space: nowrap;

・overflow: hidden;

・text-overflow: ellipsis;

コード例を見ていきましょう。

【html】
<h3 class="title">
  <span>ここに施工事例のタイトルが入ります。ここに施工事例のタイトルが入ります。</span>
</div>

【CSS】
.title span {
	display: block;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.12em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

これで実現可能です！
一つずつ解説していきます。

・white-space: nowrap;　⇒　改行をしないように指定します。
・overflow: hidden;　⇒　要素からはみだした場合表示させなくします。
・text-overflow: ellipsis;　⇒　テキストがはみ出した場合、3点リーダーを表示させます。

text-overflow: ellipsis　は他に「clip」や「任意の文字列」にもすることができます。

行数を指定する（２行以上）

では続いて2行以上の指定方法についてです。今回は2行の指定方法です。

【html】
<p class="text">
  ここに施工事例の説明文が入ります。ここに施工事例の説明文が入ります。ここに施工事例の説明文が入ります。
</p>

【CSS】
.text {
  font-size: 15px;
  overflow: hidden;
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 行数指定 */
}

`display: -webkit-box;`

役割: 要素をフレキシブルボックス（flexbox）として扱うようにしますが、-webkitは古いブラウザ用のベンダープリフィックスです。これにより、特定のブラウザ（主にWebKitエンジンを使用するブラウザ、例えばChromeやSafari）で動作します。
効果: この設定で、-webkit-line-clampの制約が適用されるようになります。