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