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

您需要指定容器的宽度 - ＆gt;这样你的文本框就会知道它的宽度。
你需要告诉文字不要换行。
您需要隐藏溢出的文字。
您需要使用省略号来填充文本。

以下代码有效：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

使用flexbox设置基于兄弟的元素的最大宽度

1 个答案: