如何在不导致换行符的情况下指定元素的最大宽度？

【问题标题】：How can I specify an element's width as the most it can be without causing a newline break?如何在不导致换行符的情况下指定元素的最大宽度？
【发布时间】：2015-10-10 08:32:29
【问题描述】：

我对 CSS 很陌生。我想显示一长串充满省略号的文本。 This jsfiddle 演示了一个工作示例。

但是，请注意，如果您扩展窗口，文本仍然限制在 100 像素（由于 max-width: 100px）属性。但是，如果我删除 max-width 属性，则文本 never shrinks:

我希望文本尽可能地扩展而不会导致换行。即这是它应该如何寻找各种窗口宽度：

我该怎么做呢？

【问题讨论】：

标签： html css width overflow

【解决方案1】：

这样就可以了。您可以使用display: block; 代替display: inline-block;，然后添加margin-right: 75px;，这样文本就不会与按钮重叠。

.one-line-only {
    font-family: monospace;
    display: block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 75px; /*(you can set the value depends on your needs)*/
}

然后在你的按钮上添加这个 css，然后添加 margin-top: -20px; 来内联按钮。

.b{
    margin-top: -20px; /*(you can set the value depends on your needs)*/
    float:right;
}

<span class="one-line-only"> Stuff to the left ----  Thisisareallylongthingwhichshouldbestoppedatsomepointforsure</span>
<button class='b'>Stuff right</button>

JSFIDDLE DEMO

【讨论】：