如果内联块元素不能容纳内部具有另一个绝对元素的容器，则收缩内联块元素答案

【问题标题】：Shrink inline block element if it can't fit the container having another absolute element inside如果内联块元素不能容纳内部具有另一个绝对元素的容器，则收缩内联块元素
【发布时间】：2014-03-28 02:13:08
【问题描述】：

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

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

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

第二个元素（标签）可能为空（无法修复宽度）
第二个元素（标签）应该向右对齐（我现在使用绝对位置）。

有时使用图像而不是文字会更好，因此您可以这样做：

幕后只是：

<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) 的内容放不下，如何让其自动缩小？

【问题讨论】：

标签： css compass-sass

【解决方案1】：

如果您切换元素的顺序以使“标签”元素排在第一位：

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

【讨论】：