CSS Flex：容器中的文本转义

HTML：

<div class="image-view"> 
    <div class="info"> 
     <span class="label title">d37ci4x.jpg</span> 
     <span class="label scale">100%</span> 
    </div> 
    <img src="http://i.imgur.com/rfcsACA.png" /> 
</div>

CSS：

.image-view { 
    display: inline-block; 
    border: 1px #000 solid; 
} 

.image-view .info { 
    display: flex; 
    border-bottom: 1px #000 solid; 
} 

.image-view .info .title { 
    overflow: hidden; 
    white-space: nowrap; 
    flex: 5 1 100%; 
} 

.image-view .info .scale { 
    flex: 1 0 1em; 
    padding-left: 2em; 
    border-left: 1px #000 solid; 
}

结果：

screenshot of issue

还住在http://jsfiddle.net/omhaohyd/

这里的问题是，“100％”文本以某种方式被推出到其容器外。删除填充没有帮助 - 它正确地缩小了容器并将文本向左移动，但容器也变小了，因此文本仍然流出。为.scale提供更多空间（增加1em并减少.title的100%）确实解决了这个问题，但在“100％”周围也增加了很多空白，而且我不想那么大。

这是在Lubuntu x64上的Firefox 30.0。

来源

2014-09-18 Rena

这是因为对于.scale元素，您正在使用以下flex属性：flex: 1 0 1em;，它将其计算的宽度限制为1em的最大值。结合2em左边的填充，您将它分配给文本，这会导致文本被推出容器。

可能的修补程序将删除flex-basis属性，并将其设置为auto，即flex: 1 0 auto：http://jsfiddle.net/teddyrised/omhaohyd/2/

来源

2014-09-18 23:19:54 Terry

有趣。我不是100％的'flex-basis'。你的解决方案修复了逃跑的文本，但也使得该领域超过必要的;然而我玩了一下，得到了它的工作方式：'flex：1 0 3em' - 我正确理解这意味着“使用3em的基本大小，但增长到1倍，并缩小根据需要尽可能多的0x“？ – Rena 2014-09-19 02:38:05

@Rena这是正确的。 Flex基础可以是一个固定的单位值（即“我希望你只是这个大”）或无单位的值（即“我希望你在相同的交叉轴上相对于其他容器的比例）”。但是，请注意，通过分配“3em”值，您将其宽度限制为3em，并且如果填充宽度，文本将溢出:) – Terry 2014-09-20 00:29:48

这将显示接近你想要什么。

.image-view .info .scale { 
    flex: 1 0 3em; 
    padding-left: .5em; 
    border-left: 1px #000 solid; 
}

来源

2014-09-18 23:30:59 Brandon

CSS Flex：容器中的文本转义

回答

相关问题