Kevin Powell - Community•4mo ago

Is there a way to fix this text-wrapping issue?

I have a .text-wrapper with a width: fit-content, but as you can see, there's a LOT of space on the right, is there any way to fix that without having to hard code anything? Here's a codepen for the demo https://codepen.io/Lko3001/pen/EaaeXdW

9 Replies

13eck•4mo ago

You have 2em of padding on the element along with a max-width. There's not enough width for the padding and the content. Therefore it breaks onto another line. Also, don't do this:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

There's zero reason to nuke the padding and margin on every element 🙄 If you want the content to dictate the size, git rid of the max-width on the .text-wrapper class.

lkoOP•4mo ago

@13eck , the situation is that I want to have a Max with, but by default it should be the size of the content, but I dont want that ugly space on the right, but I understand why it happens, I just dont know how to fix it. Alos isn't it a good idea to remove padding on everything? So you dont have padding on buttons,body etc. and you have everything "unstyled"?

13eck•4mo ago

No you don't want to remove padding on buttons. If you do then there is no, well, padding on the button and it looks bad. As for the width issue:

* If the value for width is less than the value for min-width, then min-width overrides width. * If the value for width is greater than the value for max-width, then max-width overrides width.

–https://developer.mozilla.org/en-US/docs/Web/CSS/width So max-width is the maximum your width can be, regardless of what you set width to And if you want to remove the margin on the body element then do that. No need to mess up your list items at the same time

lkoOP•4mo ago

I know how it works, what I'm asking is, given a max-width, and also a width of fit-content, can I get rid of that bigger padding on the right

13eck•4mo ago

If you want to sure, you just need to add a separate padding-inline-end. Though I warn you, having mis-matched padding can look really weird

13eck•4mo ago

padding-inline-end: 0.1em;

vince•4mo ago

I didn't read fully, but did you try width: max-content?

13eck•4mo ago

The problem is that the content + padding is wider than the current max-width

vince•4mo ago

Oh it has the max-width like beck said

Gaming

Programming

Is there a way to fix this text-wrapping issue?

Did you find this page helpful?