使用可变宽度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上动态设置新的固定宽度时触发一个事件，但是这感觉不佳，特别是考虑到填充和其他一些我必须减去才能得到的邻近工件适当的宽度。

对这个有什么想法吗？

Answer 1

您可以使用CSS3的灵活框式布局直观地做到这一点：

.parent-div {
    display: flex;
}

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

    min-width: 0;
}

.icon-div {
    flex: 1;
}​