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

igawa design.

Memo

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

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

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

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

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

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

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

なので、もしline-clampが効かないときは、まず以下をチェックすると良い。

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

複数行の文字列を抜粋。line-clampの実装例。コピペも可。

HTML
<p class="clamp">この文章はline-clampプロパティにより行数が制限されます。この文章はline-clampプロパティにより行数が制限されます。</p>
<p class="clamp">1234567890123456789012345678901234567890123456789012345678901234567890</p>
<p class="clamp">123456789012345678901234567890123456789012345678901234567890</p>
CSS
line-clampの実装例。

300px幅のボックス内で、2行分の文字数を抜粋し、3点リーダーを付ける場合。

例)

.selector {
 width: 300px;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 overflow: hidden;
}
ブラウザ表示

この文章はline-clampプロパティにより行数が制限されます。この文章はline-clampプロパティにより行数が制限されます。

1234567890123456789012345678901234567890123456789012345678901234567890

123456789012345678901234567890123456789012345678901234567890

petstext-overflow

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


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

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

line-clampが効かないときは、以下もチェックもすると良い。

  • Firefoxのプレフィックスも「-moz-」ではなく、「-webkit-」となっている。
  • Edgeも同様に、「-ms-」ではなく、「-webkit-」となっている。
  • iPhoneのSafariはもちろん、Chromeの場合でも一緒。

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

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

お問い合わせ CONTACT..

    免責事項について

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

    個人情報について

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