3

我有这个包含两个元素的容器 div：

<div id="container">
    <div id="right">Some, list, of, words, that, I, use</div>
    <div id="left">Person Name</div>
</div>​

我想让#right div用完#left div留下的空间并隐藏溢出。

另请注意，#left div 的宽度是可变的。

到目前为止，我想出了这个 CSS：

#container {
    width: 250px;
    border: 1px solid black;
    padding: 10px;
}

#left {
    white-space: nowrap;
    border: 1px dotted #ccc;
    display: inline;
}

#right {
    text-overflow: ellipsis;
    overflow: hidden;
    border: 1px dotted #ddd;
    white-space: nowrap;
    display: inline;
    float: right;
}

​ 但是#right div 仍然显示所有文本并在下一行结束，如下所示：

样本结果

我尝试让#right div 不浮动，添加width: 100%但似乎没有任何效果......

有谁知道我怎样才能让两者都显示在同一行，但让#right div隐藏它的溢出？

jsFiddle 链接：http: //jsfiddle.net/y4xnx/13/

编辑：修正了我对哪些 div 应该做什么的解释。

4

2 回答 2

6

将#left放在#right之前会有所帮助：

<div id="container">
    <div id="left">Person Name</div>
    <div id="right">Some, list, of, words, that, I, use</div>
</div>​

然后css中的一些更改应该可以满足您的要求：

#left {
    white-space: nowrap;
    border: 1px dotted #ccc;
    float: left;
    margin-right: 5px;
}

#right {
    text-overflow: ellipsis;
    overflow: hidden;
    border: 1px dotted #ddd;
    white-space: nowrap;
}

示例：http: //jsfiddle.net/grc4/MvXuN/

于 2012-12-22T02:14:25.820 回答
1

我试图从你的问题中实现我所理解的。在这里检查小提琴：http: //jsfiddle.net/y4xnx/20/

HTML：

<div id="container">
     <div id="left">Person Name</div>
    <div id="right">Some, list, of, words, that, I, use</div>
</div>​

CSS：

#container {
    width: 250px;
    border: 1px solid black;
    padding: 10px;
    white-space:nowrap;
    overflow:hidden;
}

#left {
    border: 1px dotted #ccc;
    display: inline-block;
}

#right {
    display:inline-block;
    border: 1px dotted #ddd;
}
​
于 2012-12-22T02:15:33.587 回答