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

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

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

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

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

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

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

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

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

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

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

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

この記事をシェアする

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

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