使用可变宽度div时的CSS文本省略号

Question

我想知道当父div和相邻div没有足够的空间时,是否有任何方法确实在浮动div增益省略号中有文本.例如:

<style>
.parent-div {
    width: 100%;
    border: 1px;
    padding: 4px;
}
.text-div {
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
.icon-div {
    float: left;
}
</style>
<div class="parent-div">
  <div class="text-div">This is text I'd like to truncate when space doesn't permit</div>
  <div class="icon-div">X</div>
</div>

到目前为止,如果我关闭浏览器窗口,父div将崩溃,然后text-div中的空格将消失,但是当没有更多空间时,省略号永远不会启动.

我唯一能想到的就是在窗口调整大小并在text-div上动态设置一个新的固定宽度时触发一个事件,但这只是感觉不够优雅,特别是考虑到填充和其他相邻的工件我不得不减去适当的宽度.

对这个有什么想法吗？

这是一个jsFiddle演示:http://jsfiddle.net/Blender/kXMz7/

Answer 1

您可以使用CSS3灵活的盒子布局来非常直观地执行此操作:

.parent-div {
    display: flex;
}

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    

    min-width: 0;
}

.icon-div {
    flex: 1;
}?

演示:http://jsfiddle.net/Blender/kXMz7/1/

Answer 2

我的公司还不支持CSS3,但我能够用另一种解决方案解决问题.通过float仅将属性应用于图标div并将其放在HTML中,另一个div将保持垂直对齐,同时在没有足够空间时截断.

示例:(右侧图标)http://jsfiddle.net/qftWN/ ,(左侧图标)http://jsfiddle.net/Nr2NN/