line-clampの使い方。CSSで行数指定。効かないときは?|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

CSS line-clampが効かないときに確認すべきこと。

line-clampの使い方。CSSで行数指定。

line-clampの登場により、JavaScriptやPHPなどを使用しなければなからなった「行数指定、文字列の抜粋」が、CSSだけでできるようになった。

まだ新しいプロパティなので使用方法に慣れが必要かもしれないが、IEのサポート終了によりモダンブラウザでの実装は可能である。

ブログやニュースなど、投稿記事のタイトルの抜粋が非常に楽であり、かつCSSなのでブレイクポイントによりスマホは2行、PCは3行などと簡単に振り分けができる。

line-clampは単体では機能しなく、次の4つを一緒に指定する必要がある。

  • display: -webkit-box;
  • -webkit-box-orient: vertical;
  • -webkit-line-clamp: 3; (3点リーダーを付ける行数を指定する。)
  • overflow: hidden;(指定しなくても3点リーダーは付くが、行数がはみ出てしまう。)

「line-clamp」の実装例。

CSS

line-clampの実装例。

2行分の文字数を抜粋し、3点リーダーを付ける場合。

例)

.selector {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 overflow: hidden;
}

text-overflow

似たプロパティに「text-overflow」があるが、こちらは1行のみで複数行に対応していない。
(「line-clamp」の場合、もし1行にしたければ、値を「1」にすれば対応できる。)


line-clampにベンダープレフィックスはまだ必要。

line-clampは2022年11月現在、まだ「-webkit-」のプレフィックスが必要であり、そのままでは動作しない。

Firefoxのプレフィックスも「-moz-」ではなく、「-webkit-」となっている。

MDN: -webkit-line-clamp – CSS: カスケーディングスタイルシート | MDN

CSS line-clampが効かないときに確認すべきこと。

Can I Use: “line-clamp” | Can I use… Support tables for HTML5, CSS3, etc


WordPressの記事タイトルの抜粋はPHPでも。

CSSではなくPHPでやりたい! 3点リーダーをドットに変えたい!などという場合は、下記のmb_substr関数を使用したコードで実装できる。get_the_title()のように、見出しタグの中に入れれば良い。

PHP

記事タイトルを10文字抜粋し、ドット3つの「…」を付ける場合。

例)

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

CSS line-clampが効かないときに確認すべきこと。

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


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

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

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。