menu
menu

キーワード検索

 

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

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

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