style が white-space:pre なブロック要素内で折り返すように JavaScript でハックするには

かなり限定的な話です。
スタイルシートの white-space 属性が pre 指定だと任意に改行が行われなくなるので、長い行が存在するとスクロールが入って見づらくなるのは、よく知られていると思います。
そんなときに JavaScript を適用して直して表示させる方法です。

1

.prestyle { white-space:pre; }

となっていたときに下記のように load 時に修正します。

1
2
3
4
5
6
7

$(window).load(function() {
$(".prestyle").each(function(){
var ctn = $(this).html();
ctn = ctn.replace(/^\\n|\\n$/g, "").replace(/\\n/g, "<br>");
$(this).html(ctn).css("white-space", "normal");
});
});

※jQuery.js を使ってます。改行を br タグ に置き換えて white-space をノーマルに戻しています。Firefox だと前後に改行が入るようなので消しています。
IE だと中身に CR, LF が入っていても、white-space:pre や pre タグでないと innerHTML で取得するときは全てスペース化されてしまいます。
改行を活かしたいけど、HTML には手は付けられない。けれども CSS と JavaScript は付加できる。そんな場合に今回は有効な方法です。