html - 在 flex 行中使用 `nowrap` 时，避免将最后一个元素推出屏幕

Question

我需要在一行中呈现一段很长的文本。和行尾的图像(屏幕的紧端)。

给定一个很长的文本，我必须简单地截断它。 文本现在应该放在第二行，因为它太长了。

请看我的代码。 如何避免将漂亮的表情符号推出屏幕？

请注意右侧的元素可能是动态的。所以给出一个固定的宽度是不够的。

div {
display:flex;
justify-content: space-between;
}

span {
white-space:nowrap;
overflow:hidden;
}

<div>
<span>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </span>
<span>🛑</span>
</div>

Answer 1

您基本上只需要记住默认情况下 flex 元素可以收缩(flex-shrink: 1)。

一旦你禁用了flex-shrink，你就应该准备好了。

div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;    /* optional */
}

span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* optional */
}

span:last-child {
  flex-shrink: 0;
}

<div>
  <span>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </span>
  <span>🛑</span>
</div>