
text-overflowの使い方。CSSで文字数を制御。効かないときは?
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
CSSで文字数の制御。text-overflowの使い方。
text-overflowで3点リーダーを付ける場合は単体では機能しなく、次の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">123456789012345678901234567890123456789012345678901234567890</p>
CSS
text-overflowの実装例。
30文字分の文字数を抜粋し、3点リーダーを付けたい場合。
例)
.ellipsis {
width: 30em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ブラウザ表示
この文章はtext-overflowプロパティにより文字数が制限されます。
1234567890123456789012345678901234567890123456789012345678901234567890
123456789012345678901234567890123456789012345678901234567890
emという単位について。
width: 30emにより文字数が30文字を超えると3点リーダーが付き、それ以上の文字列は省略される。と思いきや、実際には30文字分ではない。
一昔前はemは文字数分の単位(例えば10emなら10文字分)と言われていた時期や情報があったが、実際には親要素のフォントサイズなどの影響を受けるため、きっちり30文字分とはならない。
参考: CSS の値と単位 – ウェブ開発を学ぶ | MDN
複数行の場合はline-clampで。
「text-overflow」は1行内の文字数の制御に向いている。
似たプロパティに「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">123456789012345678901234567890123456789012345678901234567890</p>
横幅300px分の文字数を抜粋し、切り取りたい場合。
例)
.clip {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
ブラウザ表示
この文章はtext-overflowプロパティにより文字数が制限されます。
1234567890123456789012345678901234567890123456789012345678901234567890
123456789012345678901234567890123456789012345678901234567890
文字数を厳密に指定したい!という場合。
WordPressサイトなどであれば、文字数の抜粋はPHPでも可能だ。
例えば記事タイトルの文字数を抜粋したい場合、下記のmb_substr関数を使用したコードで実装できる。get_the_title()のように、見出しタグの中に入れれば良い。
PHP
記事タイトルを10文字抜粋し、3点リーダーを付ける場合。
例)
<?php echo mb_substr($post->post_title, 0, 10) . '…'; ?>
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。