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
25 Replies
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;
Same issue
hm weird because im seeing no change bw "text-wrap: pretty" and having no text-wrap property on it at all
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 spaceSo the use case here is I'm making chat bubbles in CSS
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/VwRPdeNIn 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.
Why not?
Centering it isn't really what users would expect with a chat bubble - most are left-aigned
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.
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
🤷🏻♀️ good luck! I'm out of suggestions.
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
Of course it can be centered
If the P element was the right size, that would solve all of the problems lol
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
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
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.
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
Here's what I'm going for
Instead of this
@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
Good problem solving!