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