-->

When using `nowrap` within a flex row, avoid pushi

2019-07-18 23:34发布

问题:

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>