menu
menu

キーワード検索

 

前月(10月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 7↑) 【HTML5】HTML5・ページ作成の基本
  5. ( 6↑)【jQuery入門】jQueryで日時を表示
  6. ( 5↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 4↓) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 8-) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. (10-) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

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

  • Labs

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

こんにちは(・∀・)

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

Contents

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

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

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