如何使用 HTML 和 CSS 强制 div 内容保持在一行中？

我在一个定义为 width 的 div中有一段很长的文本:

HTML:

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

CSS:

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

如何强制字符串保持在一行中(即，在“ Overflow”的中间被切断) ？

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

484961 次浏览
小开

在CSS部分中，使用white-space: nowrap;。

小开

尝试设置一个高度，这样块就不能增长到容纳你的文本，并保留overflow: hidden参数。

下面是一个例子，如果你需要显示两行高，你可能会喜欢:

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

把这个添加到你的div:

white-space: nowrap;

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

小开
最佳答案

试试这个:

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

使用white-space:nowrap和overflow:hidden

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

小开

试试吧。它使用pre而不是nowrap，因为我假设你想让它类似于<pre>运行，但两者都可以工作:

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

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

小开

我做了一把小提琴:

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

RobAgar指出white-space:nowrap。

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

同样，如前所述，你可以使用white-space: pre(见EnderMB)，记住pre不会折叠空白，而white-space: nowrap会。

小开

之前的答案对我都没用。

在某些情况下，不管你做什么，并且取决于系统(Oracle Designer: Oracle 11g - PL/SQL)， div总是会转到下一行，在这种情况下，你应该使用跨度标记。

这对我产生了奇效。

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

div {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div>Stack Overflow is the BEST!!!</div>

小开 
div {
display: flex;
flex-direction: row;
}

是对我有效的解决方法。在div-lists的某些情况下，这是必需的。

一些可供选择的方向值是row-reverse， column， column-reverse， unset， initial和inherit。做你期望他们做的事。

小开

在span中你需要添加: { display: block; } < / p > 

span {
width: 70px;
border: 1px solid black;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<span>Stack Overflow is the BEST!!!</sapn>


提交答案