在 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

因为两个 <span> 元素都是 overflow:hidden，第二个 <span> 也被截断了。

一种解决方案是仅将文本元素设置为截断。
下面，我已经证明这也适用于多个图标。

body {
  margin: 0;
}

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

.text {
  white-space: nowrap;
  overflow: hidden;
}

<div>
  <span class="text">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>
  <span></span>
  <span></span>
</div>

另一个解决方案是通过将 flex-shrink 设置为零来防止图标缩小。
下面，我使用 flex shorthand 设置 flex-grow、flex-shrink 和 flex-basis。
（也适用于不同宽度的图标和多个图标。）

body {
  margin: 0;
}

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

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

.icon {
  flex: 0 0 auto;
}

<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 class="icon"></span>
  <span class="icon"></span>
</div>

Answer 2

您基本上只需要记住弹性项目默认可以收缩 (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>

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

When using `nowrap` within a flex row, avoid pushing the last elements off the screen

html

css

flexbox

nowrap