我如何才能迫使div内容停留在一行与HTML和CSS?

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

HTML:

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

CSS:

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

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

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

当前回答

在span中需要添加: {显示:块;｝

跨度{ 宽度:70 px; 边框:1px纯黑色; 显示:块; 溢出:隐藏; 空白:nowrap;} 文本溢出:省略; ｝堆栈溢出是最好的!!< / sapn >

其他回答

我做了一把小提琴:

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

RobAgar指出了空白:nowrap。

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

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

把这个添加到你的div:

white-space: nowrap;

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

试试这个:

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

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

使用white-space:nowrap和overflow:hidden

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

推荐文章