9月更新・前月(8月)の人気記事トップ10 09/02/2024
- ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 09 ↑) 【Mac】Safariでソースコードを見る方法
- ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
- ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
- (圏外↑) 【GIMP】レイヤーをロック
【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
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で対応した方が良さそうです。
一応リンクを張っておきます。