タイトルやテキストの高さを揃えるためのCSS

解説動画

長いテキストの表示する行数を指定するCSS

ブログ一覧ページなどで、記事の文章を抜粋して表示させることがあるかと思います。

javascriptやfunctions.php (wordpressのとき) などで文字数を指定することもできますが、レスポンシブのことなどを考えるとイマイチ使い勝手が悪いです。

そこでcssを使って整えます。その時に使うのが、こちらになります。

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //ここを変える

このコードは結構よく使いますので、すぐに引き出せるようにしておきたいですね！
私は、すぐに引き出したいものは PASTE というアプリを使っています。

( リンクはこちら )

ボタン1つですぐに引き出すことができ 、保存や削除も簡単なのでとても重宝してます！

こちらは有料にはなりますが、月200円、年間1680円 で使えるので課金する価値はあると思います！(Mac限定のアプリになります。)

 タイトルの高さを揃える方法

方法１：line-heightを２倍にする

1行のタイトルの部分の line-heightを ２倍にします！

手順

▶︎ html の 上の title クラスの部分のみ lh2 クラスを記述

▶︎ cssで.title の line-height : 1.5 なので、 2倍の .title.lh2 { line-height : 3 } を記述

▶︎ 高さが揃う

コード

.title {
    line-height: 1.5;
}
.title.lh2 {
    line-height: 3;
}

方法２：高さを指定し、align-items : center

手順

▶︎ ２行のタイトルの部分の高さを計算

今回は、font-size: 30px で line-height: 1.5 なので 30px × 2行 × 1.5 = 90pxになります。

そこで、height: 90px を指定

▶︎ display: flex  と  align-items: center を使って縦中央揃えにする

コード

.title {
    height: 90px;
    display: flex;
    align-items: center;
}

まとめ

ブログ記事の一覧などでよく使うものなので、頭に入れておくと良いかと思います！