How to remove the white spaces when text goes to second line

Question

Assume that i have the code below So basically i have a design to show the 'vs prev period' with a percentage, and they has to be in same line, so i use display: flex in this case

The problem is we want that the gap between two child to always be 2px when rendering. However, when the content of left child or content of right child is too long, making the left child content wrap to second line (which is what we want). However, when this happens, the gap between 2 children is no longer 2px, because there is a white spaces in left child.

I add a screenshot here, you can see there is space which is indicated with blue box, making the total gap between 2 children no longer 2px.

So the question is when this happens, is there anyway to remove this bluebox spaces, so that it can force the gap to always be 2px.

What we want in design:

Thanks

p/s: using word-break:break-all to the left child is not a good UX solution, we still want break by word, but somehow remove the whitespaces

.parent{
display:flex;
max-width: 200px;
gap: 2px;
margin-bottom: 20px;
}

.text{
background: yellow
}

.number {
background: lightblue;
}

<div class='parent'>
<div class='text child'>vs prev period</div>
<div class='number child'>1.23%</div>
</div>


<div class='parent'>
<div class='text child'>vs prev period vs prev vs prev</div>
<div class='number child'>1.23%</div>
</div>


<div class='parent'>
<div class='text child'>vs prev period</div>
<div class='number child'>3,221,189,823.23%</div>
</div>

that white-space have nothing to do with children or flexbox but solely have something to do with the usage of `margin-bottom: 20px` of the flex containers. — tacoshy, Jun 28 '23 at 07:50
@tacoshy maybe i express my idea wrong ,i update the screenshot — Jake Lam, Jun 28 '23 at 07:57
That's because your first element takes all space that is left and last element takes smallest possible space. I don't even know what you want to achieve if you have fixed width for parents and content does not align properly on white spaces. — Justinas, Jun 28 '23 at 08:10
Technically speaking, the gap is still 2px between the two elements. Only that the first child is wider than you'd expect, hence the yellow background. — Salketer, Jun 28 '23 at 08:12
yes the gap is still 2px in technical side, but to user vision it is more than 2px. Thats why i want to see if there is anyway to auto shrink the first child — Jake Lam, Jun 28 '23 at 08:16
you mean `word-break: break-all` to left child right? it also seems not a good UX to user, as it will make the content not easy to read — Jake Lam, Jun 28 '23 at 08:19
@JakeLam ... the root cause is the fixed width of a `.parent` class' `max-width` property ... `max-width: 200px;`. This value is the dominating variable (in the OP's case the limiting one) in how word breaks gets handled for any random text content. Just play around with the `max-width` value and various other text contents. — Peter Seliger, Jun 28 '23 at 08:23
i updated the desired screenshot that we want We still need to have the parent width limit, we dont want the parent width too long — Jake Lam, Jun 28 '23 at 08:25
Not a satisfactory option, but it's worth playing with `.text {width: min-content;}`. That will shrink the yellow boxes to just the longest word, although that probably isn't what you want. — ralph.m, Jun 28 '23 at 08:26
IMO if the picture is your desired visual, have a space too big is the smallest of your problems... Sorry but that's not looking anything good. Best web designers are designers aware of the HTML/CSS limitations who design around those constraint. What you want is just not possible unless you want to add a couple JS code just to calculate the exact size needed. — Salketer, Jun 28 '23 at 08:29
@JakeLam ... _"i updated the desired screenshot that we want"_ ... and still you will not overcome the limitations of rendering random text perfectly fitting into any container. — Peter Seliger, Jun 28 '23 at 08:30

score 1 · Answer 1 · answered Jun 28 '23 at 08:09

Your only bet is to use a justified alignment. This will play with the spaces in the line to make the text span the whole width.

The only other way I can think of is aligning the text on the right instead of left.

The reason for it is because when setting your max-width to 200px, the text pushes to the boundaries and then wraps. The wrapping creates a gap but the size stays 200px as the container will always try to fit as much content as possible. I am not aware of a way to "shrink" the container according to the wrapped content bounding box, unless you wrapped it yourself by including a line break.

.parent{
display:flex;
max-width: 200px;
gap: 2px;
margin-bottom: 20px;
}

.text{
background: yellow;
text-align:justify;
}

.number {
background: lightblue;
}

<div class='parent'>
<div class='text child'>vs prev period</div>
<div class='number child'>1.23%</div>
</div>


<div class='parent'>
<div class='text child'>vs prev period vs prev vs prev</div>
<div class='number child'>1.23%</div>
</div>


<div class='parent'>
<div class='text child'>vs prev period</div>
<div class='number child'>3,221,189,823.23%</div>
</div>

Thanks for your input, i think this is also a way to achieve the requirement of 2px, but the UX also feel a bit not beautiful. Like you mentioned, i think what im looking for is a way to auto shrink the left child to fit its content when it goes to 2nd line. We still need to set a width limit for the parent, — Jake Lam, Jun 28 '23 at 08:18
Without any contextual details on the UI, I think the alignment to the right would be the best, it would make the problematic space almost unoticable since it would be on the left. Let me show you an example with some css. — Salketer, Jun 28 '23 at 08:21

How to remove the white spaces when text goes to second line

1 Answers1