text-overflowの使い方。CSSで文字数を制御。効かないときは？ / メモ / いがわ

text-overflowの使い方。CSSで文字数を制御。効かないときは？

2023.01.06

Contents - 目次

1 CSSで文字数の制御。text-overflowの使い方。
2 「text-overflow」の実装例 – ellipsis。
3 「text-overflow」の実装例 – clip。
4 文字数を厳密に指定したい！という場合。
5 CSS 関連メモ。

CSSで文字数の制御。text-overflowの使い方。

text-overflowの仕様。

text-overflow

text-overflowで３点リーダーを付ける場合は単体では機能しなく、次の4つを一緒に指定する必要がある。

width: 30em; (幅の単位や広さは任意。)
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

「text-overflow」の実装例 – ellipsis。

text-overflowの実装例。

ellipsis

30文字分の文字数を抜粋し、３点リーダーを付けたい場合は「ellipsis」で。

HTML

<p class="ellipsis">この文章はtext-overflowプロパティにより文字数が制限されます。</p>
<p class="ellipsis">1234567890123456789012345678901234567890123456789012345678901234567890</p>
<p class="ellipsis">１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０</p>

CSS

.ellipsis {
 width: 30em;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

結果。

この文章はtext-overflowプロパティにより文字数が制限されます。

1234567890123456789012345678901234567890123456789012345678901234567890

１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０

text-overflowの使い方。CSSで文字数を制御。

emという単位について。pets

width: 30emにより文字数が30文字を超えると３点リーダーが付き、それ以上の文字列は省略される。と思いきや、実際には30文字分ではない。

一昔前はemは文字数分の単位（例えば10emなら10文字分）と言われていた時期や情報があったが、実際には親要素のフォントサイズなどの影響を受けるため、きっちり30文字分とはならない。

参考： CSS の値と単位 – ウェブ開発を学ぶ | MDN

複数行の場合はline-clampで。pets

「text-overflow」は１行内の文字数の制御に向いている。
似たプロパティに「line-clamp」があるが、line-clampは文字数ではなく、行数の指定に対応している。

参考：line-clampの使い方。CSSで複数行指定。効かないときは？

「text-overflow」の実装例 – clip。

text-overflowの実装例。

clip

横幅300px分の文字数を抜粋し、切り取りたい場合は「clip」で。

HTML

<p class="clip">この文章はtext-overflowプロパティにより文字数が制限されます。</p>
<p class="clip">1234567890123456789012345678901234567890123456789012345678901234567890</p>
<p class="clip">１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０</p>

CSS

.clip {
 width: 300px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: clip;
}

結果。

この文章はtext-overflowプロパティにより文字数が制限されます。

1234567890123456789012345678901234567890123456789012345678901234567890

１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０

文字数を厳密に指定したい！という場合。

mb_substrの実装例。

mb_substr

WordPressサイトなどであれば、文字数の抜粋はPHPでも可能。

例えば記事タイトルの文字数を抜粋したい場合、下記のmb_substr関数を使用したコードで実装できる。get_the_title()のように、見出しタグの中に入れれば良い。

記事タイトルを10文字抜粋し、３点リーダーを付ける場合。

PHP

<?php echo mb_substr($post->post_title, 0, 10) . '…'; ?>

文字数の抜粋の方法。効かないときに確認すべきこと。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。