Question

我目前有以下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;
}

Answer 1

尝试使用大小（所有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/

调整跨度以填充div中的剩余宽度

1 个答案: