• 画面幅が狭い（スマホ等）でタイトルの文字数が多いと右側のテキストが縦に伸び、カードの高さがバラつく。結果として左のサムネイルの下に空白ができてしまう。

• これまではテンプレート側で {{ post.title|truncatechars:40 }} のように文字数で切っていたが、画面幅に応じた改行には弱い。truncatechars は、文字数を制限して表示するDjangoのテンプレートフィルタです。この例では、タイトル(post.title)を 40文字まで に切り取り、それを超えると自動的に「…」が付きます。

※開発環境の画面です

わかる人にはわかると思いますが、このサイトKakuhanAppは、ほぼほぼBootstrapで装飾しています。

Bootstrapは、レスポンシブ対応のWebデザインが簡単にできるCSSフレームワークです。デザインに悩まず手軽に作れるので愛用しています（CSSを書くのがめんどくさい）。

しかし、Bootstrapには今回おこないたい"行数で省略" を実現するユーティリティがないです。そこで、CSS（-webkit-line-clamp / line-clamp）で行数制限ができるらしいので今回はそれで実装してみます。

今回はカードのサムネイルの高さに合わせて３行に制限することにします。

変更前

<h5 class="card-title">
  {{ recommended_post.title|truncatechars:40 }}
</h5>

変更後

まず、CSSで以下のクラスを作成

.title-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
このクラスを追加するだけ

<h5 class="card-title title-clamp"> {{ recommended_post.title }} </h5> 

これでタイトルが3行を超えると自動的に省略され、カード全体の高さが揃うようになり、サムネイルの下の大きな空白も改善されました。