text-overflowの使い方。CSSで文字数を制御。効かないときは?ブログメモ デザイナー、コーチ、ディレクター|井川

igawa design.

Memo

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

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

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

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

petsemという単位について。

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

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

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

pets複数行の場合は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年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    免責事項について

    • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。