dreamedge.net

1. スクロールバーを付ける

pre {
  overflow-x: auto;
}

スタンダードな解法

2. 右端(近くの半角スペース)で折り返す

pre {
    white-space: pre-wrap;      /* CSS3, Firefox3- */
    white-space: -moz-pre-wrap; /* Mozilla */
    word-wrap: break-word;      /* IE 5.5+ */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -pre-wrap;     /* Opera 4-6 */
}

便利といえば便利だけど，これなら<pre>タグ使う意味がないような…

他にも<wbr>タグを使うとか，いろいろテクニックはあるみたい．