X

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

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

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

  1. С помощью css ограничить выход за границы (overflow), но при таком подходе, мы можем либо обрезать текст, либо добавить полосы прокрутки, что не совсем удобно и красиво.
  2. Мы можем добавить перенос строк. К сожалению, этот способ не совсем валидный и реализуется через костыли для разных браузеров. Благо, за нас все уже придумали, нам остается только скопипастить, а выглядит это так:
    pre {
     white-space: pre-wrap;       /* css-3 */ white-space: -moz-pre-wrap ;  /* 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%;
    }
Категории: CSS HTML
Тэги: csshtmloverflowpre

Комментарии (1)

  • Ура. Считайте, хоть одному человеку Вы помогли.