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
