テキストの長さが動的に変わる場合を考慮してコーディング

どうも、くまだです。

WordPressサイトを構築するとき、コンテンツにお知らせだったりNewsだったり、テキストの長さが動的に変わる部分があると思います。テキストの長さを考慮してコーディングしなければなりません。

テキストの長さが動的に変わる場合のコーディング

例えば、なんとなくな感じでコーディングする。

〇 HTML

<article>
  <a class="news" href="">
    <div class="news__inner">
      <div class="news__content">
        <div class="news__head">
          <div class="news__cat">おしらせ</div>
          <time class="news__date">2021.2.22</time>
        </div>
        <div class="news__textbox">
          <h2 class="news__title">短いタイトル</h2>
        </div>
      </div>
  
    </div>
  
  </a>

</article>

〇 CSS

a {
  text-decoration: none;
}
h2 {
  padding: 0;
  margin: 0;
}

.news {
  cursor: pointer;
  width: 100%;
  display: block;
  max-width: 800px;
}

.news:not(:first-child) {
  margin-top: 10px;
}

.news__cat {
  color: black;
  font-size: 10px;
  background: orange;
  padding: 8px 10px;
  display: inline-block;
  margin-right: 8px;
}

.news__date {
  color: black;
  font-size: 10px;
  
}

.news__head {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.news__inner {
  padding-right: 20px;
  padding-left: 20px;
}

.news__content {
  display: flex;
  align-items: center;
}

.news__title {
  font-size: 14px;
  color: black;

}

一見良さそうな感じですがテキストが長くなると、

お知らせ部分が縦に潰れてしまいます。なので、以下のように修正。

.news__title {
  width: 100%;　/* 追記 */
  font-size: 14px;
  color: black;
  max-width: 300px; /* 追記 */
}

デザインによりますが、こんな感じです。これでもいいですがさらに長いタイトルいれられるとデザイン的によろしくない。

長さによっては上の画像のような事態になりかねません。なので、例えば以下のように行数制限かけます。

.news__title {
  width: 100%;
  font-size: 14px;
  color: black;
  max-width: 300px;

  /*以下、追記*/
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

こんな感じですっきり。長文は「…」で省略されます。タイトルはともかく、本文を抜粋として見せたい場合、長文のままだと表示が微妙な感じになりますので、その対処法になります。

ここまで読んでくださりありがとうございました。