連続した英数字も改行させる

 CSSの話。英数字が連続していると改行されず、意図しない感じではみ出しちゃったりする。それを解除剃る方法があったよなあ。
 結論。
  word-break: break-all;
 だそうだ。これで単語の途中でも改行されるようになる。せまいところにつめこもうとした場合には有効そう。意味よりも見た目重視の場合とか。
 半角英数字の文字列を折り返す:CSS小技半角英数字の文字列を折り返す:CSS小技はてなブックマーク - 半角英数字の文字列を折り返す:CSS小技

 いつも忘れて検索するはめになる。忘れないようにメモ。


 さらに調べるとword-wrapという似たようなものもあるという。
word-breakプロパティとword-wrapプロパティの違い - CSSデザインノートword-breakプロパティとword-wrapプロパティの違い – CSSデザインノートはてなブックマーク - word-breakプロパティとword-wrapプロパティの違い - CSSデザインノート

 ブラウザによって効果が異なるという。ややこしい。
 とりあえず、両方入れとくとか? わからん。
 上記サイトには、両者の違いもちゃんと書かれてる。
改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 - CSSデザインノート改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 – CSSデザインノートはてなブックマーク - 改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 - CSSデザインノート

 ついでに回りこみ解除の方法についてもメモしておこう。同じサイトに詳細が。
決定版!?Clearfixのソースコードはここまで短くなった - CSSデザインノート決定版!?Clearfixのソースコードはここまで短くなった – CSSデザインノートはてなブックマーク - 決定版!?Clearfixのソースコードはここまで短くなった - CSSデザインノート

(追記 2012/04/20)
 Firefoxではbreak-allが効かないそうだ。あとでまた書く。

コメント

  1. 連続した英数字も改行させる の続き。Firefoxではだめだそうだ

     英数字で改行されずにはみだしちゃったりするので、調べたうえで前にこんなのを書いた。  連続した英数字も改行させる  なんとか問題は解決。と思ってたのだけど。その後。Firefoxで問題が解決されていなことに気づく。  Firefoxでは、word-break、word-wrapでも英数字が連続する場合は改行してくれないそうだ。  自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。 | 乱雑モッ…