Перенос строк в теге <pre>

Как мы знаем, тег <pre> сохраняет форматирование уже созданного документа. Таким образом очень удобно, например, выводить текст из ранее подготовленных файлов txt. Но что делать, если строка в таком блоке превышает допустимую ширину блока (например ограничение дизайна страницы)?

Есть два варианта:

1. С помощью css ограничить выход за границы (overflow), но при таком подходе, мы можем либо обрезать текст, либо добавить полосы прокрутки, что не совсем удобно и красиво.
2. Мы можем добавить перенос строк. К сожалению, этот способ не совсем валидный и реализуется через костыли для разных браузеров. Благо, за нас все уже придумали, нам остается только скопипастить, а выглядит это так:
   
   pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ width: 99%; }

   1 2 3 4 5 6 7 8 9 10

   pre { white-space: pre-wrap;       /* css-3 */ white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */ white-space: -pre-wrap;      /* Opera 4-6 */ white-space: -o-pre-wrap;    /* Opera 7 */ word-wrap: break-word;       /* Internet Explorer 5.5+ */ width: 99%; }