43

我想知道当父 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/

4

2 回答 2

72

您可以使用 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/

于 2012-09-29T21:37:49.373 回答
12

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

示例：（右侧图标）http://jsfiddle.net/qftWN/，（左侧图标）http://jsfiddle.net/Nr2NN/

于 2013-06-20T00:51:04.363 回答