【CSS】はみ出した文字を「...」で省略する方法が簡単すぎた
Pairsのクローンを作成していて、長すぎる文字を省略させたい部分があったので調べてみました。
jQueryでごにょごにょやるのかなー面倒くさいなーと思ってたらCSSでズバッと一撃で解決して感激したのでまとめます。
長すぎるメッセージを送信した場合、最新のメッセージを表示している枠がどんどん大きくなってしまって時間を表示させる枠がおかしなことになっちゃう現象が発生しました。
本来はメッセージ本文の下に時間が入らないといけないことになってます。
これを解消するためにはjQueryで要素の幅とか文字数とか取得してあーだこーだやるのかなー…とか考えてたんですが、対象のCSS(柴咲コウ 36歳って書いてるとこの下のaaaaaの部分)に以下の三つを追加するだけで解決しました。
これを入れるだけで
こうなりました。CSSで制御できると楽でいいですね。
ただ注意点としては、このやり方だと複数行表示させてから「...」で省略させることはできないみたいです。その場合やはりjQueryとか他のやり方を考えないといけないですね。
まあでもあんまり無いケースな気がするので、大抵はこのやり方だけでなんとかなりそうです。