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

Question

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

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

我希望文本在不引起换行的情况下尽可能地延长。即这是它应该如何寻找各种窗口宽度:

我该怎么做？

Answer 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