在弹性行中使用`nowrap`时，请避免将最后一个元素推离屏幕
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在弹性行中使用`nowrap`时，请避免将最后一个元素推离屏幕相关的知识，希望对你有一定的参考价值。
我需要在一行内渲染一个长文本。和一行中的图像（屏幕的紧密端）。
给定一个非常长的文本，我必须简单地截断它。现在该文本应该进入第二行，因为它太长了。
请看我的代码。如何避免将漂亮的表情符号推出屏幕？
请注意右侧的元素可能是动态的。所以给出一个固定的宽度是不够的。
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>元素都是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>以上是关于在弹性行中使用`nowrap`时，请避免将最后一个元素推离屏幕的主要内容，如果未能解决你的问题，请参考以下文章