2

我目前有以下html结构

<div>
    <span id="a">
        Some text
    </span>
    <span id="c">
        <span id="resizable">
            Some text...
        </span>
        <span id="b">
            <img>
        </span>
    </span>
</div>

我希望 div 内的所有内容都在一行上（不应包装任何内容），并且 div 应完全位于容器内。#a 和 #b 的内容应该完整显示，但 #resizable 跨度可以调整大小以调整剩余空间。如果里面的文字不能完全显示，那么溢出应该用省略号代替。

我很难把所有东西都放在容器里。如果#resizable 中的文本太长，整个 div 就会流到容器外，因为我似乎无法让#resizable 正确调整大小。

有人对如何实现这一目标有任何想法吗？

编辑

这是我到目前为止的CSS

#resizable {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.c {
    display: inline-block;
}
4

1 回答 1

4

试试这个尺寸（所有 CSS）：

span {
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden
}
#a {
    color: #F00;
    display: block;
    float: left;
    margin-right: 10px;
}
#c {
    display: block;
}
#b {
    display: block;
    float: right;
}

http://jsfiddle.net/markdelorey/XUBYt/

于 2013-07-17T05:28:10.433 回答