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：容器中的文本轉義

回答

相關問題