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

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

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

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

HTML

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

CSS

text-overflowの実装例。

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

例）

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

ブラウザ表示

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

1234567890123456789012345678901234567890123456789012345678901234567890

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

petsemという単位について。

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

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

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

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

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

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

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

CSS

text-overflowの実装例。

HTML

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

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

例）

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

ブラウザ表示

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

1234567890123456789012345678901234567890123456789012345678901234567890

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

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

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

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

PHP

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

例）

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

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

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