html - 使用 flexbox 设置基于同级元素的最大宽度

Question

我正在为包含图像和文本元素的缩略图组件设计布局。图片具有 height: 100px; 和自动宽度，而文本的宽度应不超过图片的宽度，溢出部分应该被隐藏。

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

我已经尝试使用 flexbox 完成此操作，但无法使文本宽度等于图像宽度。相反，文本只会增长 100% 并拉伸(stretch)图像。

See my jsbin

Answer 1

1. 您需要指定容器的宽度 -> 以便您的文本框知道它的宽度。
2. 您需要告诉文本不要换行。
3. 您需要 overflow hidden 的文本。
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 中的示例