Я хочу использовать <pre></pre> чтобы сохранить формат входного текста, но отображаемый текст пересекает границу его родительского тега<div></div>

Question

Текст в <pre></pre> выходит за границы своего родительского <div></div>.Как решить эту проблему?

Говорят, что длину строк в предварительно отформатированном тексте можно сократить, но как это сделать?

Я видел

<%# DataBinder.Eval(Container.DataItem, "Comments")
               .ToString().Replace("\n", "<br />") %>

Это c #?Я PHP-программист.

Answer 1

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

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+ */
}

Если вы вообще не хотите изменять форматирование текста, этот CSS будет использовать полосы прокрутки, чтобы весь текст был доступен для просмотра в любом случае:

pre {
  width: 100%;
  overflow: auto;
}

Answer 2

Попробуйте добавить CSS:

pre {
  width: 100%;
  overflow: auto;
}