CSSで1行で収まらないテキストを省略して「…」を付ける方法

今回は画像やサムネイルのキャプションや、記事一覧の長いタイトルなどを表示する際に、テキストを表示するスペースが無くテキストがはみ出てしまう場合に使える省略方法を紹介します。

pとspanとdivの違いや特徴：例文を見ながら理解しよう！！

上記のブログカードはタイトルが長く2行になってしまっています。今回はこのカードを編集しながら説明します。
何となく中途半端な部分でテキストが改行されると気持ちが悪いので、ここはいっそのことテキストを省略して1行に揃えます。

1行で収まらないテキストを省略して「…」を付ける方法

今回使用するCSSプロパティは以下のものです。

実はCSSでは長過ぎるテキストを「…」に置き換えてくれるプロパティの「text-overflow」が存在します。影が薄いプロパティなので知らない人も多いと思いますが、ブログやギャラリーサイトなどキャプションを多用する様なサイトには非常に便利なプロパティなので覚えておきましょう。

テキストを1行にして文末を「…」に置き換えるにはテキストが入ったボックスに対して下記のCSSセットを使用します。

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

「…」が必要無い場合は「ellipsis」を「clip」に置き換えればOKです。
「…」の名前がellipsis（エリプシス）

では、冒頭のブログカードのボックスに対して先程のCSSを入れ込みます。

HTMLは下記

<div class="waku">
<a href="https://kt-life.net/p-span-div/">
<img src="/wp-content/uploads/2020/03/pとspanとdivの違いや特徴-min-320x180.jpg" alt="">
</a>
<p class="syouryaku">
<a href="https://kt-life.net/p-span-div/">
pとspanとdivの違いや特徴：例文を見ながら理解しよう！！
</a>
</p>
</div>

CSSは下記

.waku {
 border: solid 1px #ccc;
 width: 320px;
}
.syouryaku {
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
}

実際の見た目は下記

pとspanとdivの違いや特徴：例文を見ながら理解しよう！！

この様にタイトルが1行になり、文末が「…」になっているのが分かります。
このブログカードならスマートになりますね。

以上が「CSSで1行で収まらないテキストを省略して「…」を付ける方法」でした。