Мы все знаем, что тег <pre> может определять предварительно отформатированный текст, и его обычное применение — представление исходного кода компьютера. Текст, заключенный в элемент pre, обычно сохраняет пробелы и символы новой строки, но, к сожалению, когда вы пишете код внутри тега <pre>, если вы не переносите символы новой строки вручную, он также будет сохранен для вас вместо разрыва строки.
В настоящее время вы можете использовать overflow:auto; (когда код выходит за границу контейнера, отображается полоса прокрутки), но этот метод подходит не для всех основных браузеров, а некоторые браузеры напрямую обрезают превышенный контент.
Поскольку на этом сайте не так много мест, где используется исходный код, меня эта проблема раньше особо не волновала. Не так давно один энтузиаст сети сообщил об этой проблеме на QQ, поэтому, когда на этот раз я сменил тему, я посмотрел. за решение и поделился им.
| до { пробел: предварительная упаковка; /* css-3 */ пробел: -moz-pre-wrap /* Mozilla, с 1999 г. */ пробел: /* Opera 4-6 */ пробел: -o-pre-wrap; /* Opera 7 */; перенос слов: разрыв слова /* Internet Explorer 5.5+ */ } |
Это решение CSS позволяет автоматически переносить текст в теге pre. Я тестировал его во всех имеющихся у меня браузерах, и все они поддерживают IE6, IE7, IE8, Firefox, Opera, Safari и Chrome.
Оно выходит за пределы только в том случае, если вы уменьшите ширину окна до ширины менее 20 символов.