【Labs】CSS3で長い文章を省略して「...」に置き換える

こんにちは（・∀・）

今回は長くなった文章を「...」に置き換えて省略する方法についてご紹介します。

CSS3で長い文章を省略して「...」に置き換える

text-overflowプロパティの値ellipsisは指定した要素の横幅を文章が超えた場合「...」に置き換えます。値clipは何もしません。

1. 長い文章を省略

HTML

<div class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at mauris ut orci tincidunt sollicitudin. Donec fermentum arcu quis ipsum gravida eleifend.
</div>
<div class="demo2">
Mauris ultricies nisl at porttitor interdum. Morbi blandit dictum velit, nec accumsan sapien accumsan sed.
</div>

CSS

.demo {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 250px;
}
.demo2 {
  text-overflow: clip;
  width: 250px;
}

Result

text-overflowプロパティで長い文章を省略して「...」に置き換える方法はwhite-space:nowrapを併用しているため複数行の文章には対応しておりません。webkit系だけでよければ次の方法で複数行の文章にも対応できます。

2. 複数行の長い文章を省略

HTML

<div class="demo3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at mauris ut orci tincidunt sollicitudin. Donec fermentum arcu quis ipsum gravida eleifend.
</div>

CSS

.demo3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

Result

この方法はdisplay:flexではなくboxで実現しています。ご紹介しておいて何ですが、display:boxはいづれサポートされなくなるのでこの方法を使用するのはやめた方がいいかもしれません。

いかがでしたでしょうか、今回はCSS3で長い文章を「...」に置き換えて省略する方法についてご紹介しました。複数行で長い文章を省略したい場合はJavaScriptで対応した方が良さそうです。

一応リンクを張っておきます。

jquery.ellipsis

関連リンク

【CSS3リファレンス】text-overflow