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

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

HTML:

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

CSS:

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

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

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

当前回答

使用white-space:nowrap和overflow:hidden

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

其他回答

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

是对我有效的解决方法。在使用div列表的某些情况下，这是必需的。

一些可供选择的方向值是行反向、列反向、列反向、未设置、初始值和继承。做你期望他们做的事。

把这个添加到你的div:

white-space: nowrap;

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

使用white-space:nowrap和overflow:hidden

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

div { 宽度:100 px; 空白:nowrap;} 溢出:隐藏; 文本溢出:省略; ｝ <div>Stack Overflow是最好的!!< / div >

试试这个:

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

推荐文章