在新行中显示文本 - HTML、CSS

Question

我想在 HTML 上显示格式化文本，文本字符串来自数据库。文本显示在 <div class="col-xs-12"> 中，在 div 中我有 <pre> 标记。

如果文本大小超过屏幕，它会超出屏幕截图中显示的 div 宽度。如果没有更多宽度，我想换行并开始新行以显示剩余文本。谢谢。

Answer 1

你应该添加：

pre {
   white-space: pre-wrap;       /* Since CSS 2.1 */
   white-space: -moz-pre-wrap;  /* Mozilla */
   white-space: -pre-wrap;      /* Opera 4-6 */
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer */
}

到你的CSS。

Answer 2

不要使用<pre>，而是使用段落标签<p> some text </p>或使用<p> <pre> some text </pre></p>

在 CSS 中

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

Answer 3

在您的样式中添加以下 css：

pre {
  white-space: pre-wrap;
}

pre {
  white-space: pre-wrap;
}

<pre>Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... Long text here... </pre>

Answer 4

试试这个：

CSS：

pre{
  display:block;
  word-wrap: break-word;
}