HTML + CSS：如何强制div内容保持在一行？

我有一个定义width的div内的长文本 ：

HTML：

 <div>Stack Overflow is the BEST !!!</div> 

CSS：

 div { border: 1px solid black; width: 70px; } 

我怎么能强迫string保持在一行（即在“溢出”的中间被切断）？

我试图使用overflow: hidden ，但没有帮助。

Answer 1

尝试这个：

 div { border: 1px solid black; width: 70px; overflow: hidden; white-space: nowrap; } 

Answer 2

使用white-space:nowrap和overflow:hidden

http://jsfiddle.net/NXchy/8/

Answer 3

在你的CSS使用white-space:nowrap;

Answer 4

每个人都跳上这一个！ 我也做了一个小提琴：

http://jsfiddle.net/audetwebdesign/kh4aR/

RobAgar首先指出了white-space:nowrap 。

这里的几件事情，你需要overflow: hidden如果你不想看到额外的字符戳到你的布局。

另外，如上所述，你可以使用white-space: pre （请参阅EnderMB）记住pre不会折叠空白，而white-space: nowrap会。

Answer 5

您的HTML代码： <div>Stack Overflow is the BEST !!!</div>

CSS：

 div { width: 100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 

现在结果应该是：

 堆栈覆盖... 

Answer 6

把这个添加到你的div

 white-space: nowrap; 

http://jsfiddle.net/NXchy/1/

Answer 7

试试这个。 它使用pre而不是nowrap因为我会假设你会希望它像<pre>一样运行，但是两者都可以正常工作：

 div { border: 1px solid black; max-width: 70px; white-space:pre; } 

http://jsfiddle.net/NXchy/11/

Answer 8

我跳到这里寻找同样的东西，但都没有为我工作。

有些情况下，无论你做什么，并根据系统（Oracledevise器：Oracle 11g – PL / SQL），div将始终转到下一行，在这种情况下，您应该使用span标签。

这为我工作奇迹。

 <span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)"> <input type="radio" id="radio4" name="p_verify_type" value="SomeValue" /> </span> Just Your Text || <span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span> 

Answer 9

尝试设置一个高度，使块不能长大，以适应您的文本，并保持overflow: hidden参数

编辑：这是你可能喜欢的一个例子，如果你需要显示2行高：

 div { border: 1px solid black; width: 70px; height: 2.2em; overflow: hidden; }