CSSだけで幅を超えた文字列を...で省略する - Qiita

ある幅に合わせて文字列を省略したいときがありますが、 レンダリングされる文字によって幅が違うので、文字数で制御するのは割と面倒ですね。 ですが以下のようにcssを書いておけばきっちり決めた幅であふれた部分を「...」で省略してくれます。 p{ width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; /* Opera9,10対応 */ }

[masayoshinym]

文字溢れ対策に覚えておく。リンクにも使えるの便利。

[onitanuki]

便利なCSS技

[saito-kazuo]

指定した幅と高さ（line-heightの値でも可）からはみ出すテキストを省略して行末に省略記号を付ける方法。IE7対応とのこと

[kanno_kanno]

ellipsis。widthの指定とoverflowも必須

[morygonzalez]

長い文字列の省略を css だけでやる

[rochefort]

CSSだけで幅を超えた文字列を...で省略する

[typista]

ぽけったー CSSだけで幅を超えた文字列を...で省略する

[Yukarigohan]

CSSだけで幅を超えた文字列を...で省略する

[tokida]

これは便利ですね。♪　CSSだけで幅を超えた文字列を...で省略する #HTML #CSS - Qiita by @ichikawa_0829 on @Qiita_jp

[bleu-bleut]

文字列の省略

[hiro_y]

text-overflow: ellipsis;

[nabemac]

複数行の場合でもうまくいくのかな？

[gin0606]

"CSSだけで幅を超えた文字列を...で省略する #HTML #CSS - Qiita"

[kkeisuke]

-webkit-text-overflow

[accent_32]

BOX内でも動くけど自動改行が出来ない。一行表現か手動でbr等改行タグいれてやれば出来るんだけどね。シンプルに実装しようとしてはまった記憶。

[tsuki-rs]

おぉ。機会があれば実践してみよう。

[cyokodog]

ボックスで使えないんだっけ。。たしか

[atyks]

IE6でも動くっぽいな。