さぁ!検索しよう!

CSSのみでブログの記事一覧等で、長いタイトルを折り返さずに、末尾に「…」を付けて一行で収める方法です。

DEMO

この方法はマルチカラムレイアウト等、表示領域が小さくなる場面に適しているでしょう。

HTMLを書く

始めに以下のHTMLを書きます。

<main class="contents">
  <article class="post">
    <aside class="post__thumbnail">
      <img src="http://tsukulog.net/wp-content/uploads/2015/04/5-min.jpg">
    </aside>
    <p class="post__title text-ellipsis">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
  </article>
  <article class="post">
    <aside class="post__thumbnail">
      <img src="http://tsukulog.net/wp-content/uploads/2015/04/5-min.jpg">
    </aside>
    <p class="post__title text-ellipsis">いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
  </article>
</main>

タイトル<p class="post__title"></p>.text-ellipsisを追加することで1行に省略しています。

CSSを書く

最後に以下のCSSを書きます。

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.contents {
  display: -webkit-flex;
  display: flex;
}

.post {
  margin-right: 2%;
  width: 49%;
}
.post:nth-child(2n) {
  margin-right: 0;
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.text-ellipsisクラスでは、white-space: nowrap;で折り返さずに一行に表示させ、overflow: hidden;で領域からはみ出た文字を隠し、text-overflow: ellipsis;でタイトル末尾を「…」としています。


以上で、CSSのみで長くなったタイトルを末尾に「…」を付けて一行で収める方法を終わります。