css - 如果内联 block 元素不适合包含另一个绝对元素的容器，则收缩内联 block 元素

Question

我在父容器中有两个并排放置的内联 block 元素。 为了便于解释，假设第一个包含文件名，第二个包含一些标签。

第一个的内容可能太长而无法放入其中。如果内容比父容器的宽度长或者第二个元素占用太多空间，就会发生这种情况。在这两种情况下，我都希望第一个元素自动收缩。

通常，这很容易完成。诀窍在于:

• 第二个元素(标签)可能为空(无法固定 宽度)
• 第二个元素(标签)应右对齐(我现在使用绝对位置)。

有时候使用图片比文字更好，所以这里是:

在幕后它只是:

<div class="document-belt">
  <a class="link">some_very_looong_file_name.txt</a>
  <div class="tags">sometag</div>
</div>

和

.document-belt {     
    width:250px;
    position:relative;

    white-space: nowrap;    
}

.link {
    display: inline-block;        
    text-overflow: ellipsis;
}

.tags {
    display: inline-block;
    position:absolute;
    right: 0px;
}

http://jsfiddle.net/vTm75/

如何让第一个元素(.link)在内容放不下时自动收缩？

Answer 1

如果您切换元素的顺序，使“tags”元素排在第一位:

<div class="document-belt">
    <div class="tags">sometag</div>
    <a class="link">some_very_looong_file_name.txt</a>
</div>

然后以下将起作用:

.document-belt { 
    overflow:hidden; 
    border: 1px solid blue;
    width:250px;
}

.link {
    display: block;        
    margin-left:0px; 
    overflow:hidden; 
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid red;
}

.tags {
    float:right; 
    border: 1px solid green;
}

http://jsfiddle.net/vTm75/11/