読者です 読者をやめる 読者になる 読者になる

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

JavaScript IE

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

.prestyle { white-space:pre; }

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

$(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 には手は付けられない。けれども CSSJavaScript は付加できる。そんな場合に今回は有効な方法です。