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

Posted 2023-03-14

【中文标题】HTML+CSS：如何强制 div 内容保持在一行？

【英文标题】：How can I force div contents to stay in one line with HTML and CSS?

【发布时间】：2011-07-11 01:53:09

【问题描述】：

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，但没有帮助。

【问题讨论】：

white-space: nowrap 把它放在你的风格标签中。

【参考方案1】：

试试这个：

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

【参考方案2】：

使用white-space:nowrap 和overflow:hidden

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

【讨论】：

在上面添加text-overflow:ellipsis; 以获得更好的外观。

不用css也能实现吗？

【参考方案3】：

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

【参考方案4】：

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

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

现在结果应该是：

堆栈溢出...

【参考方案5】：

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

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

RobAgar 因首先指出 white-space:nowrap 而得一分。

这里有几件事，如果您不想看到多余的字符突出到您的布局中，则需要 overflow: hidden。

另外，如上所述，您可以使用 white-space: pre（请参阅 EnderMB），记住 pre 不会折叠空白，而 white-space: nowrap 会。

【参考方案6】：

div 
    display: flex;
    flex-direction: row; 

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

一些替代方向值是row-reverse, column, column-reverse, unset, initial, inherit 做你期望他们做的事情

【参考方案7】：

试试这个。它使用pre 而不是nowrap，因为我假设您希望它与<pre> 类似地运行，但两者都可以正常工作：

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

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

【参考方案8】：

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

在某些情况下，无论您做什么，并且取决于系统（Oracle 设计器：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>

【讨论】：

这方面的巨大帮助，这对我有用，可能花了 30 分钟，哈哈。奇怪的是，我没有使用你提到的任何东西，css、javascript、bootstrap 和一些自定义 css。

【参考方案9】：

将此添加到您的 div 中

white-space: nowrap;

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

【讨论】：

可以加：overflow:auto 显示水平滚动条

【参考方案10】：

尝试设置一个高度，使块不能增长以适应您的文本，并保留overflow: hidden 参数

编辑：如果您需要显示 2 行高，以下是您可能喜欢的示例：

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

【讨论】：

在你的情况下 nowrap 选项可能更好，但我留下了我的答案，因为我有时发现自己需要一个可能有一些行换行直到它像这样溢出的块：jsfiddle.net/NXchy/7（更改了链接来自 Stephenmurdoch 的版本，谢谢！）

不需要这个，如果用户想使用 ctrl-+ 来增加文本大小会发生什么？保持高度灵活更好。

如果用户使用 ctrl-+ 调整文本大小应该可以工作：jsfiddle.net/kpKW3

在height 中使用em 可以保持灵活性，关键点在您的示例中得到了很好的说明。