CSSのword-break で、はみ出さないように自動改行

長ーいURLとかを所定のブロックとかに収めたいけど、改行されずに困るじゃないですか。
あれの対策です。

Firefox2以下を切り捨てるならば、cssで
.word-break{ word-break:break-all; word-wrap:break-word; display: inline-block; }
で、大体の場合クリアできそう。
word-break:break-all で表示範囲に合わせて改行されるのですが、word-break:break-allがないとsafariがテーブルのセル内で折り返してくれないし、display: inline-block;がないとFirefox3系がテーブルのセル内で折り返してくれない。
これで大体の場合OKと思うけど、詳しく検証してないので。

あと、
overflow:hidden; text-overflow:clip;
とかではみ出した分を「…」とかにするというてもありますね。

Firefox2以下は何やってもダメっぽいので、overflow:auto;とかjsで回避するとかしかないのかな?
そういえば昔、jQueryでの半角英数の改行に関する記事書いたみたいでした。

Comments