指定数以上の文字を「・・・」で省略表示する方法

こんにちはー こやぎwebの枝川ですー。
今回は、私がよく使うcssのご紹介です!!
 
レスポンシブデザインでコーディングしていると、画面幅が小さくなった時だけ、なが〜い文章を省略して語尾に「・・・」を表示させたい時がちょくちょくあると思うんです。私はあるのです。
そんなときPHPやJavaScriptを使わず、cssで簡単に実装できる方法があります!

p {
 width: 200px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

▼ Demo

cssで文字を省略表示したいんだー

↑文字列の横幅が200pxを超えた部分が「・・・」表示になります。

 

★解説としては
→ widthに好きな幅を設定する
→ white-spaceをnowrapにすることで文字列を1列にする
→ すると、文字が枠からはみ出て1列になる
→ overflowをhiddenにすることで、はみ出た文字を非表示にする
→ text-overflowをellipsisにすることで語尾に「・・・」を表示させる
という感じです^^
 

★注意
tableのtd要素や、span要素などには効かないときがあります・・・
そんなとき、tdには、widthに加えてmax-widthでも同じ値を指定しましょう!
spanなどのインライン要素には、display:block; を指定しましょう!
 
この方法なら、PCなどの画面幅が大きいときは全文を表示したいけど、スマホサイズにしたときだけ省略したいというレスポンシブデザインの時、コピペ1つで簡単に使えます♪
 

iidesu