如果内嵌块元素不适合内部具有另一个绝对元素的容器，则缩小内联块元素

Question

我在父容器中有两个彼此相邻的内联块元素。 为了便于解释，我们假设第一个包含文件名，第二个包含一些标签。

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

通常，这很容易完成。诀窍是：

• 第二个元素（标签）可能是空的（不能修复） 宽度）
• 第二个元素（标签）应该与右边对齐（我现在用绝对位置做）。

有时最好使用图片而不是文字，所以在这里你去：

在幕后它只是：

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