HTML <pre class="prettyprint-override"> tag values get horizontal scroll bars,how to format it?

Это моя страница в блоге. В некоторых моих сообщениях есть блоки кода C#. Для этого я использую теги <'pre'>. pre ширина тега составляет 100%, а цвет фона. Однако текст удалился от него, как показано на рисунке ниже. Как я могу это преодолеть? Мне не нужна нижняя полоса прокрутки.

Ответ 1

Есть несколько решений:

Самое простое - поместить разрывы строк в тексте. Это, вероятно, не то, что вам нужно, поскольку оно либо оставит большие правые поля, либо по-прежнему вызовет полосы прокрутки, если только окно браузера не имеет правильный размер.

Другой способ - использовать white-space:pre-wrap; в CSS для вашего тега <pre>. Это приведет к тому, что текст будет перенесен на новую строку по мере необходимости, но при этом сохранятся все пробелы, присутствующие в источнике. См. https://developer.mozilla.org/en-US/docs/Web/CSS/white-space для получения дополнительной информации об этом свойстве CSS.

В качестве альтернативы, если вы не хотите добавлять разрывы строк (вручную или с помощью автоматического переноса слов), вы можете использовать одно из следующих свойств CSS для тега <pre>:

overflow-x:hidden; Это просто обрежет текст, который выходит за правый край. Он вообще не будет виден.
overflow-x:scroll; Это заставит полосы прокрутки появляться на вашей веб-странице, если текст выходит за правый край. Это не позволит всей странице стать настолько широкой, что полосы прокрутки появятся внизу. Смотрите http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-x&preval=scroll для примера.
overflow-x:auto; Как и overflow-x:scroll;, за исключением того, что полосы прокрутки появляются только при необходимости. (Спасибо ccalvert в комментариях)

Ответ 2

добавить стиль:

pre { 
    white-space: pre-wrap; 
    word-break: break-word;
}

Ответ 3

Вы можете использовать некоторые свойства CSS:

pre {
display: flex;
white-space: normal;
word-break: break-word;
}

Необязательно, если <pre> находится внутри <span>:

span pre { display: inline-flex; }

Ответ 4

Мои строки содержатся в тегах <a>. Это работает для меня:

a, pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}