【サンプルコード-CSS】記事やタイトルを”…”で省略表示するCSS(Chrome)2017/07/10

■記事やタイトルを”…”で省略表示するCSS

textcss00
ブログなどのサイドバーやフッターで、新着記事や人気記事を小さく表示する機能があると思います。

その際に表示される本文やタイトルを限られたスペースに収めるため、指定スペースを越える場合には”…”での省略表示をさせる方法について調べました。

Chrome以外では省略されないため、メモとして書いていきます。

 

[参考サイト]:表示をカスタマイズ!CSSのwhite-spaceの使い方【初心者向け】(2016/01/14)

[参考サイト]:[意外と知らないCSS]テキストが領域をこえた場合に「…」を表示するtext-overflow:ellipsis(2013/03/29)

[参考サイト]:【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー(…)にする方法いろいろ(2014/10/06)

 

◆”…”での省略表示をさせる方法
下の画像を例に省略表示させたいと思います。

<環境>

<div id=wrapper>
<div class=”text-box”>
<h1>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</h1>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
</div>
</div>

 

#wrapper{
width: 25%;
}

.text-box{
background-color: #d5dcf5;

width: 100%;

}

textcss01

タイトルが3行、本文が4行になってしまっています。

「”…”での省略表示」には1行を省略する方法と、複数行を省略する方法があります。

今回はタイトルを1行省略、本文を複数行での省略をしてみたいと思います。

 

 

◇タイトルの”…”省略のCSS記述

タイトルを1行での省略をする場合には下記で再現できます。

 

.text-box{
background-color: #d5dcf5;
width: 100%;

}
.text-box h1{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

textcss02

 

 

◇本文の”…”省略のCSS記述

本文の場合は下記で再現できます。

-webkit-line-clamp: 3;の「3」は行数で、増減させることで行数を変えることができます。

あくまで枠外のテキストを隠しているだけですので、下に少し見えてしまった際にはline-heightで行間を調整してあげればキレイに隠れてくれると思います。

 

.text-box{
background-color: #d5dcf5;
overflow: hidden;
width: 100%;

}
.text-box h1{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.text-box p{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}

textcss03

 

その他、文章の省略についての詳細は参考サイトをご参照ください。