HTML

Last-modified: 2009-10-26 (月) 21:35:48

ボックス内で折り返す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単位で指定するとうまくいくことがある。