使用flexbox設置基於同級元素的最大寬度

Question

我正在處理包含圖像和文本元素的縮略圖組件的佈局。圖像有height: 100px;和自動寬度，而文本應該跨越圖像寬度的寬度，並且應該隱藏溢出。

<div> 
    <img src="..."> 
    <span>a bunch of text that should be cut off</span> 
</div> 

我已經嘗試使用flexbox來完成此操作，但是我無法獲得文本寬度等於圖像寬度。相反，文本只是增長100％並延伸出圖像。

See my jsbin

Answer 1

1. 您需要指定容器的寬度 - >讓你的文本框知道它的寬度。
2. 你需要告訴文字不要換行。
3. 您需要隱藏溢出文本。
4. 您需要使用省略號來溢出文本。

---

下面的代碼工作：

.main { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 50%; // px would also work 
 
} 
 
.main img { 
 
    height: 100px; 
 
    flex: 0 0 100%; 
 
} 
 
.main div { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="main"> 
 
    <img src="http://i.imgur.com/uiGur1h.jpg" alt=""> 
 
    <div>Text go here </div> 
 
</div> 
 
<div class="main"> 
 
    <img src="http://i.imgur.com/uiGur1h.jpg" alt=""> 
 
    <div>Text would go here but would be cut off if it's very long </div> 
 
</div>

---

參考在https://developer.mozilla.org/en/docs/Web/CSS/text-overflow

例子