以新行显示文本 - 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{
  display:block;
  word-wrap: break-word;
}

Answer 4

在你的风格中添加以下css：

pre {
  white-space: pre-wrap;
}

＆＃13;

＆＃13;

pre {
  white-space: pre-wrap;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;