WSTS Page


preタグ使用時に枠内で折り返すようにする

WSTS Page / HTMLとJavaScript / preタグ使用時に枠内で折り返すようにする

preタグ使用時に枠内で折り返すようにする方法です。

preタグに何も指定していない場合。
コード
<div style="background:#FFFFFF;color:#000000;width:200px;padding-left:10px;border:thin solid #000000;">
<pre>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccccccccccccccccccccccccc
</pre>
</div>
表示結果
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccccccccccccccccccccccccc

preタグに、
overflow: auto;
white-space: pre-wrap;
word-wrap: break-word;
を設定した場合
コード
<div style="background:#FFFFFF;color:#000000;width:200px;padding-left:10px;border:thin solid #000000;">
<pre style="overflow: auto;white-space: pre-wrap;word-wrap: break-word;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccccccccccccccccccccccccc
</pre>
</div>
表示結果
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccccccccccccccccccccccccc