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

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

是对我有用的解决方案。在某些情况下，div需要使用-lists。

一些替代的方向值可以row-reverse, column, column-reverse, unset, initial, inherit 完成您期望他们做的事情

将此添加到您的div

white-space: nowrap;

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

尝试设置高度，以使块无法增长以容纳您的文本，并保留overflow: hidden参数

编辑：这是您可能需要显示两行高的示例：

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

我跳到这里寻找同样的东西，但没有一个对我有用。

在某些情况下，无论您做什么工作，都取决于系统（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>

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

尝试这个：

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

每个人都跳了！！！我也弄了个小提琴：

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

RobAgar white-space:nowrap首先指出要点。

这里overflow: hidden有些事情，如果您不想看到多余的字符插入您的布局中，则需要。

同样，如前所述，您可以使用white-space: pre（请参阅EnderMB）牢记，它pre不会折叠空白，而white-space: nowrap只会折叠空白。

试试看。它使用pre而不是nowrap我想您希望它与之类似运行，<pre>但是两者都可以正常工作：

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

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

使用white-space:nowrap和overflow:hidden

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

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

CSS：

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

现在的结果应该是：

堆栈溢出