Making a paragraph fit it's content

I have a <p> element, which I'd like to add a max width to, and also have text-wrap set to balance. However, applying these properties creates extra space on the right side of the element, which I'd like to get rid of. As you can see in the pen below, I've tried adding width: fit-content, but it doesn't change anything. What should I do to fix this? Here's a pen: https://codepen.io/samalander0/pen/ZEPLjzm
No description
25 Replies
clevermissfox
clevermissfoxβ€’10mo ago
its because of the text-wrap: balance. Its saving that space in case it needs it as the page gets smaller and the wrap changes try text-wrap: pretty;
Samalander
Samalanderβ€’10mo ago
Same issue
Samalander
Samalanderβ€’10mo ago
No description
clevermissfox
clevermissfoxβ€’10mo ago
hm weird because im seeing no change bw "text-wrap: pretty" and having no text-wrap property on it at all
clevermissfox
clevermissfoxβ€’10mo ago
clevermissfox
clevermissfoxβ€’10mo ago
youre always going to have some space on the end of a paragraph with a max-width because youre trying to fit all the words in to a space. try width: min-content and see if thats what you want because you cant get rid of all the space. you could do text-align: center to balance it within so there is equal space on both sides whenever possible you WANT some white space generally , it looks terrible to have the letters flat against the sides you could also try setting your max-width in characters e.g max-width: 30ch; and find the exact value that it looks good at, at least on large screens. if its in a container that ends up getting squished, youre going to end up with some white space at some point and no one will notice but you. More so people will notice if there is NO margin/padding/white space
Samalander
Samalanderβ€’10mo ago
So the use case here is I'm making chat bubbles in CSS
No description
Samalander
Samalanderβ€’10mo ago
I'd like to have that nice pretty or balance text wrap, but it causes that extra padding Here's the pen for that if you want to play around with it: https://codepen.io/samalander0/pen/VwRPdeN
clevermissfox
clevermissfoxβ€’10mo ago
In this example there's still some white space. I would center it within the bubble so at least you can break up the space evenly on either side. But you need some space. It can't be flush against the side.
Samalander
Samalanderβ€’10mo ago
Why not? Centering it isn't really what users would expect with a chat bubble - most are left-aigned
clevermissfox
clevermissfoxβ€’10mo ago
Look around the web. Do you see any professional example where text is flush against the side of its container with a different bg color? White space lets it breathe. It's hard to read if the side of your H is right against the container. Too little whitespace is a dead giveaway that someone is brand new to design/development. Also because the web is responsive. You can't guarentee how long the content will be and how it will rearrange when it's pushed down at smaller screen sizes. I'm not saying center justified; left-justified but centered within the bubble. Like a margin-inline: auto. But you do you, can't change your mind but don't be surprised when someone else suggests it when giving feedback on your progress.
Samalander
Samalanderβ€’10mo ago
Yes, I understand, but I'm suggesting it would look better without the extra white space as it would be more ballanced Also, I want the padding to be consistent
clevermissfox
clevermissfoxβ€’10mo ago
πŸ€·πŸ»β€β™€οΈ good luck! I'm out of suggestions.
Samalander
Samalanderβ€’10mo ago
So centered within the bubble wouldn't really look right Additionally, that wouldn't work since the P elelement is too big so can't be centered
clevermissfox
clevermissfoxβ€’10mo ago
Of course it can be centered
Samalander
Samalanderβ€’10mo ago
If the P element was the right size, that would solve all of the problems lol
clevermissfox
clevermissfoxβ€’10mo ago
You can't predict how it's going to rearrange respinsively or you could set the container to be exactly 20ch or whatever But that'd just not how it works
Samalander
Samalanderβ€’10mo ago
The element itself is too big, so if I tried to center it, the computed center would be at the red line, as opposed to the actual center of the text at the blue line
No description
clevermissfox
clevermissfoxβ€’10mo ago
It all depends on what the content is inside. If that said "webdev" instead of "web development" it would be. The example "Yea its not too hard" is perfectly centered in its container. Same with "Yo ..." . Btw you need more line-height for that size text. It's too cramped You can't have it all in development so we just work with elements as we are able. When content is being dynamically updated there's no way to make it all the same width because you dont know what the "message" will be and how many nonbreaking words. You could break your words but that would look worse than having some extra space.
Samalander
Samalanderβ€’10mo ago
I'm aware lol just taking it one step at a time I'm trying to make this something that's dynamic/can work with differently sized text It just feels like there should be something in CSS to make that <p> element the actual size of the text Maybe I'll just have to do some sort of JS thing
Samalander
Samalanderβ€’10mo ago
Here's what I'm going for
No description
Samalander
Samalanderβ€’10mo ago
Instead of this
No description
Samalander
Samalanderβ€’10mo ago
@hart❀πŸ”₯ Solved! I wrap the text of each paragraph element in a span element, get the span element's width, and set that width to the new max width of the parent paragraph
No description
Samalander
Samalanderβ€’10mo ago
No description
clevermissfox
clevermissfoxβ€’10mo ago
Good problem solving!
Want results from more Discord servers?
Add your server