「preタグ内での改行」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

preタグ内での改行

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>preタグ内での改行</title>
<style type="text/css">
pre.nowrap
{
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
</style>
</head>
<body>
<h1>preタグ内での改行</h1>
<h2>横幅を指定しただけ</h2>
<pre style="background:#ffccff;width:100px;">
あいうえおかきくけこさしすせそ
たちつてとなにぬねのはひふへほまみむめも
</pre>
<h2>横幅を指定とoverflow指定</h2>
<pre style="background:#ffccff;width:100px;overflow:auto;">
あいうえおかきくけこさしすせそ
たちつてとなにぬねのはひふへほまみむめも
</pre>
<h2>横幅を指定とwhite-space（normal）指定</h2>
<pre style="background:#ffccff;width:100px;white-space:normal;">
あいうえおかきくけこさしすせそ
たちつてとなにぬねのはひふへほまみむめも
</pre>
<h2>横幅を指定とwhite-space・word-wrap指定</h2>
<pre class="nowrap" style="background:#ffccff;width:100px;">
あいうえおかきくけこさしすせそ
たちつてとなにぬねのはひふへほまみむめも
</pre>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>