我有一个长文本内的div定义宽度:

HTML:

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

CSS:

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

我怎么能迫使字符串保持在一行(即,在“溢出”中间被切断)?

我试着使用overflow: hidden,但是没有用。


当前回答

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

其他回答

试试这个:

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

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

之前的答案对我都没用。

有些情况下,不管你做什么,取决于系统(Oracle Designer: 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>

我做了一把小提琴:

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

RobAgar指出了空白:nowrap。

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

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

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

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

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