我有这个容器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应该做什么的解释。
答案 0 :(得分:6)
在 #right 之前添加 #left 会有所帮助:
<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;
}
答案 1 :(得分: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;
}