Question

这是我的代码（请参阅this fiddle）：

HTML

<div id="container">
    <span id="left">Left text</span>
    <span id="middle">Very very very very very long middle text.</span>
    <span id="right">Right text</span>
</div>

CSS

#container {
    white-space: nowrap;
    position: relative;
}

#left {
    border: solid 1px red;
}

#middle {
    border: solid 1px green;
}

#right {
    border: solid 1px blue;
    position: absolute;
    right: 0px;
}

我希望#middle的宽度随着窗口变小而缩小，以免与#right发生冲突。

Answer 1

如果您正在使用任何库，如jQuery / Mootools等。

然后，它会很容易，请看这里（使用jQuery）：

http://jsfiddle.net/6AHSp/15/

Answer 2

我使用了sandeep的例子：

http://jsfiddle.net/VaDBX/

overflow: hidden仅在您使用height时才有效。它有点脏，但是没有任何JS可以很好地工作。

跨度的动态宽度

2 个答案: