Question

我正在处理一个项目，需要阻止文本换行固定的<div>。

现在我的HTML和CSS如下：

#results-container {
  width: 500px;
  overflow-x: scroll;
}

<div id="results-container"><pre>TEXT THAT SHOULD NOT WRAP</pre></div>

我希望文本显示在500px框中而不包装任何文本。现场观看：http://raceforlace.com/race-results/2014-results-overall/

Answer 1

将此添加到您的css：

#results-container {
   width: 500px;
   overflow-x: scroll;

   white-space: nowrap;
}

<div id="results-container"><pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper ut eros ac aliquet. Vestibulum at pellentesque sem. Suspendisse bibendum orci est</pre></div>

来自规范：

NOWRAP

此值会折叠空白区域，而不是“正常”，但会抑制文本中的换行符。

Answer 2

要控制文字换行，您可以使用white-space属性。

其可能值的表是

          |  New lines |  Spaces and tabs  |  Text wrapping
---------------------------------------------------------
normal    |  Collapse  |  Collapse         |  Wrap
nowrap    |  Collapse  |  Collapse         |  No wrap
pre       |  Preserve  |  Preserve         |  No wrap
pre-wrap  |  Preserve  |  Preserve         |  Wrap
pre-line  |  Preserve  |  Collapse         |  Wrap

因此，您可以使用white-space: nowrap或white-space: pre。

防止文本不包装

2 个答案: