使用可变宽度div时的CSS文本省略号 [英] CSS text ellipsis when using variable width divs

问题描述

我想知道，如果有任何方法有文本在浮动div增益省略，当父div和相邻的div不允许足够的空间。例如：

I'm wondering if there is any way do have text in a floating div gain ellipsis when the parent div and neighboring div don't allow enough room. For example:

<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将折叠，然后文本中的空白-div会消失，但是当没有更多的空间时，省略号不会输入。

So far if I crunch the browser window, the parent div will collapse, then the white space in text-div will vanish, but when there is no more room, the ellipsis never kick in.

我可以想到的唯一的事情是当窗口调整大小时触发一个事件并且在文本div上动态设置一个新的固定宽度，但这只是感觉不舒服，特别是考虑到padding和其他相邻的artifacts，我必须减去得到一个合适的宽度。

The only thing I can think to do is trigger an event when the window resizes and dynamically set a new fixed width on text-div, but this just feels inelegant, especially considering padding and other neighboring artifacts I'd have to subtract out to get a proper width.

对此有任何想法吗？

这里有一个jsFiddle演示： http： //jsfiddle.net/Blender/kXMz7/

Here's a jsFiddle demo: http://jsfiddle.net/Blender/kXMz7/

推荐答案

您可以使用CSS3的弹性框布局来做这个漂亮直观地：

You can use CSS3's flexible box layout to do this pretty intuitively:

.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/

Demo: http://jsfiddle.net/Blender/kXMz7/1/

这篇关于使用可变宽度div时的CSS文本省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！