在flex行内使用`nowrap`时，避免将最后的元素从屏幕上推出 [英] When using `nowrap` within a flex row, avoid pushing the last elements off the screen

问题描述

我需要在一行内呈现长文本。和一个图像在行尾（紧密的屏幕结束）。

给定一个非常长的文本，我不得不简单地截断它。
文本现在应该进入第二行，因为它太长。

请参阅我的代码。
如何避免将不错的表情符号推出屏幕？

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

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你好你好你好你好你好< / span>< span>
I need to render a long text within a one line. and an image in the end of the line (tight end of the screen).

Given a very long text, I have to simply truncate it.
The text should now go into a second line because it is too long.

please see my code.
how can avoid pushing the nice emoji out of the screen? 

Please take into account that the elements on the right side might be dynamic. so giving a fixed width is not good enough.



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>
                        
这篇关于在flex行内使用`nowrap`时，避免将最后的元素从屏幕上推出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！