リストを横並びにしたときに、単語ごとに折り返すCSSプロパティ(IE用)
フッターリンクなどで、リストを横並びにした際
丁度折り返す所でくずれているか、「display:inline」を使用して単語の途中でも折り返すか・・・。
「display:table」を使用しても、safariで崩れたり、対応していないブラウザが存在するので、使えません。
IEさえちゃんと表示されれば「float」だけで済むのに・・・><
と思っていましたが、ちゃんと単語ごとで折り返してくれるCSSプロパティがありました。
このプロパティはIEのみ対応しています。
word-break: nomal;
英語などの半角英数文字列は単語の切れ目で折り返され
日本語などの全角文字列は、単語の途中でも表示範囲にて折り返す。
word-break: break-all;
文字列や言語に関係なく、設定された表示範囲で折り返す。(単語の途中でも)
word-break: keep-all;
文字列や言語に関係なく、単語の切れ目で折り返す。
----------------------------------------------------------------------------------------------------------
結局は単語ごとに折り返すword-break: keep-all;しか使わないとは思いますが・・・。
半角スペース、全角スペースを単語の間に入れると折り返してしまうので注意です。