CSSの話。英数字が連続していると改行されず、意図しない感じではみ出しちゃったりする。それを解除剃る方法があったよなあ。
結論。
word-break: break-all;
だそうだ。これで単語の途中でも改行されるようになる。せまいところにつめこもうとした場合には有効そう。意味よりも見た目重視の場合とか。
半角英数字の文字列を折り返す:CSS小技
いつも忘れて検索するはめになる。忘れないようにメモ。
さらに調べるとword-wrapという似たようなものもあるという。
word-breakプロパティとword-wrapプロパティの違い – CSSデザインノート
ブラウザによって効果が異なるという。ややこしい。
とりあえず、両方入れとくとか? わからん。
上記サイトには、両者の違いもちゃんと書かれてる。
改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 – CSSデザインノート
ついでに回りこみ解除の方法についてもメモしておこう。同じサイトに詳細が。
決定版!?Clearfixのソースコードはここまで短くなった – CSSデザインノート
(追記 2012/04/20)
Firefoxではbreak-allが効かないそうだ。あとでまた書く。
コメント
連続した英数字も改行させる の続き。Firefoxではだめだそうだ
英数字で改行されずにはみだしちゃったりするので、調べたうえで前にこんなのを書いた。 連続した英数字も改行させる なんとか問題は解決。と思ってたのだけど。その後。Firefoxで問題が解決されていなことに気づく。 Firefoxでは、word-break、word-wrapでも英数字が連続する場合は改行してくれないそうだ。 自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。 | 乱雑モッ…