ボックス内で折り返すpre
テキストを以下のように表示したい。
- 空白は維持する
- 改行で折り返す
- ボックス内に収まらない行は折り返す (preだとこの条件が満たされない)
Firefox(3~)とIE(7~)と両方に対応したい。
以下のようにする。
<pre style="white-space: pre-wrap; word-wrap: break-word; width: 100px; border: solid 1px black">
あいうえお
かきくけこさしすせそたちつてと
aaa bbbb cccccccc ddddddddddddddddddd eeeeeeeeeee ffffffff gggggggg hhhhhhhhh iiiiiii jjj kkkkk lllllllll
</pre>
「white-space: pre-wrap;」はFirefox向け。IEには効かない。
空白維持、改行で折り返し、長い行は折り返し。ただし、英単語の場合、単語の途中では折り返さない。1単語がボックス幅より長い場合、ボックスからはみ出る。
「word-wrap: break-word;」はIE向け。Firefoxには効かない。
IEの場合、overflow, widthの指定によって折り返しがうまく働かないケースがある。
(詳細条件未調査)。overflow: scroll, widthを(%ではなく)px単位で指定するとうまくいくことがある。