CSS コーディング

2023.12.28

記事タイトルを行数で制御するCSS

こんにちは。コーダーのぶんちゃんです。

今日のGoodNewsは、オウンドメディアなどの記事が表示されるサイトに使えるCSSについてです。

記事一覧のタイトル、字数制限してる?

記事がたくさん発信されるオウンドメディアや、コーポレートサイトのお知らせなど、記事の一覧に表示されるのが、記事タイトルですよね。

記事のタイトルは予想外の長さが入力されることもしばしば…。そんな時はデザインを見出さない程度に最高字数などで制御するのがよいでしょう。

私は今までphpで字数を制御する記述を書いていました。ですが、デザインとして気になるのは行数ですよね。それがCSSでできるんです!

実装方法

実装方法はタイトルのクラスに下記を記述するだけ!
「-webkit-line-clamp: 3;」が行数で、数字を変えることも可能です。

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

これのいいところは、レスポンシブで幅が狭くなってしまった場合でも行数で制御してくれるので、だらだら縦長にならないことです。
また、メディアクエリでレスポンシブ時には変えることも可能なので、画面幅に合わせて調整してみてくださいね。

記事一覧のあるサイトはこれでデザイン性も損なわないですね!

それでは、よいWeb制作を!

この記事をシェアする

関連記事

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    コーディング

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    制作

    コーディング

  • 2023.12.29

    CSSで文節が切れるようになった話

    制作

    コーディング

おすすめ記事

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×