Question

I have a long text inside a div with defined width：

HTML：

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

CSS：

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

如何强制字符串保持在一行（即在“溢出”中间切割）？

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

Answer 1

试试这个：

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

Answer 2

使用white-space:nowrap和overflow:hidden

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

Answer 3

在你的css中使用white-space:nowrap;

Answer 4

每个人都跳上这个!!!我也做了一个小提琴：

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

RobAgar首先指出white-space:nowrap。

这里有一些事情，如果你不想看到额外的角色进入你的布局，你需要overflow: hidden。

此外，如上所述，您可以使用white-space: pre（请参阅EnderMB），请注意pre不会折叠空格而white-space: nowrap会崩溃。

Answer 5

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

CSS：

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

现在结果应该是：

Stack Overf...

Answer 6

将此添加到您的div

white-space: nowrap;

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

Answer 7

试一试。它使用pre而不是nowrap，因为我认为您希望它与<pre>类似地运行，但两种方法都可以正常运行：

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

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

Answer 8

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

有些情况下，无论您做什么，并且根据系统（Oracle Designer：Oracle 11g - PL / SQL），div总是会转到下一行，在这种情况下，您应该使用span标记。< / p>

这给我带来了奇迹。

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

Answer 9

尝试设置高度，以便块无法增长以适应您的文字，并保留overflow: hidden参数

编辑：以下是您需要显示2行高的示例：

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

Answer 10

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

是对我有用的解决方案。在某些情况下，如果使用div-列表，则需要这样做。

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

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

10 个答案: