white-space と word-wrap

人力検索

question:1424594503 の質問。

はてな記法で、こんな感じ。

<style>
#div-1 pre {
    white-space: pre;
}
#div-2 pre {
    white-space: pre-wrap;
}
#div-3 pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}
</style>
<div id="div-1">
id="div-1"
>|?|
var url1 = "http://localhost/oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
var url2 = "http://localhost/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/";
 ||<
</div>
<div id="div-2">
id="div-2"
>|?|
var url1 = "http://localhost/oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
var url2 = "http://localhost/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/";
 ||<
</div>
<div id="div-3">
id="div-3"
>|?|
var url1 = "http://localhost/oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
var url2 = "http://localhost/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/";
 ||<
</div>

||< の前にあるスペースは、実際にはないのと、<style>～</style> は一行にまとまってるのだけれど。

見た目は...


id="div-1"

var url1 = "http://localhost/oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
var url2 = "http://localhost/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/";


id="div-2"

var url1 = "http://localhost/oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
var url2 = "http://localhost/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/";


id="div-3"

var url1 = "http://localhost/oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
var url2 = "http://localhost/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/ooooooooooooooooooo/";