Remove width after line break in

Question

I was wondering if it is possible to remove the white space made by the new line in <div>.

Take the look at the picture, graphically speaking, is it possible to remove the green area?

The best way that I found is to play with widths and media queries but is there a better way?

Thanks in advance.

Update:

Sorry for not including the code right away.

Here is the link to the sandbox, notice the margin between the first and the second element.

https://codesandbox.io/s/blissful-night-erorj?file=/index.html

Please provide a [mcve]. Debugging styles from an image is not practical — charlietfl, Nov 07 '20 at 16:58

score -2 · Answer 1 · edited Nov 07 '20 at 18:10

-2

This is because you might have given some margin to the right or because of extra div where some width is applied. If that is so, then remove it.

edited Nov 07 '20 at 18:10

Bhargav Rao

50,140
28
121
140

answered Nov 07 '20 at 17:03

Pramod Karki

1
1

score -2 · Accepted Answer · answered Nov 07 '20 at 17:25

-2

It is happening because the text is wrapping into the second line when enough space is not available for the next word. This situation is coming in screen sizes between around 700px to 900px wide.
Use the relevant word wrapping techniques to get the desired result.
If you want your text in one line and don't want them to wrap then add white-space: nowrap; style in .list-text class.

answered Nov 07 '20 at 17:25

Rajiv

3,346
2
12
27

Thanks for your answer, can you clarify what you mean by "relevant word wrapping techniques"? – Vlad.Storozhenko Nov 07 '20 at 17:29
I meant that there are some methods to tackle this problem. you can break the words by a hyphen and keep the width equal or you can prevent it from wrapping. Also, you can use media queries for the size range it is breaking and add different styles to fix this. – Rajiv Nov 07 '20 at 17:52

Remove width after line break in

2 Answers2