menu
menu

キーワード検索

 

最近の投稿

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

  • Labs

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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at mauris ut orci tincidunt sollicitudin. Donec fermentum arcu quis ipsum gravida eleifend.
Mauris ultricies nisl at porttitor interdum. Morbi blandit dictum velit, nec accumsan sapien accumsan sed.

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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at mauris ut orci tincidunt sollicitudin. Donec fermentum arcu quis ipsum gravida eleifend.

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


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

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

jquery.ellipsis

関連リンク

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

  • カテゴリー:Labs