【CSS】はみ出した文字を「...」で省略する方法が簡単すぎた

f:id:b1840943:20180708122229p:plain

 

Pairsのクローンを作成していて、長すぎる文字を省略させたい部分があったので調べてみました。

jQueryでごにょごにょやるのかなー面倒くさいなーと思ってたらCSSでズバッと一撃で解決して感激したのでまとめます。

 

f:id:b1840943:20180614182531p:plain

 

長すぎるメッセージを送信した場合、最新のメッセージを表示している枠がどんどん大きくなってしまって時間を表示させる枠がおかしなことになっちゃう現象が発生しました。

本来はメッセージ本文の下に時間が入らないといけないことになってます。

 

これを解消するためにはjQueryで要素の幅とか文字数とか取得してあーだこーだやるのかなー…とか考えてたんですが、対象のCSS柴咲コウ 36歳って書いてるとこの下のaaaaaの部分)に以下の三つを追加するだけで解決しました。

 

.user_info02 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

 

これを入れるだけで

 

f:id:b1840943:20180614183132p:plain

 

こうなりました。CSSで制御できると楽でいいですね。

 

ただ注意点としては、このやり方だと複数行表示させてから「...」で省略させることはできないみたいです。その場合やはりjQueryとか他のやり方を考えないといけないですね。

 

まあでもあんまり無いケースな気がするので、大抵はこのやり方だけでなんとかなりそうです。

 

参考サイト

dev.classmethod.jp