Making a paragraph fit it's content

I have a

<p>

<p>

element, which I'd like to add a max width to, and also have

text-wrap

text-wrap

set to

balance

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

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

CodePenSam Cheng

Width Issue

...

curiousmissfox•1/16/24, 4:04 AM

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

curiousmissfox•1/16/24, 4:04 AM

try text-wrap: pretty;

Ccuriousmissfox try text-wrap: pretty;

SamalanderOP•1/16/24, 4:09 AM

Same issue

SamalanderOP•1/16/24, 4:10 AM

curiousmissfox•1/16/24, 4:11 AM

hm weird because im seeing no change bw "text-wrap: pretty" and having no text-wrap property on it at all

curiousmissfox•1/16/24, 4:12 AM

curiousmissfox•1/16/24, 4:13 AM

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

curiousmissfox•1/16/24, 4:13 AM

so there is equal space on both sides whenever possible

curiousmissfox•1/16/24, 4:14 AM

you WANT some white space generally , it looks terrible to have the letters flat against the sides

curiousmissfox•1/16/24, 4:16 AM

you could also try setting your max-width in characters e.g 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

Ccuriousmissfox you WANT some white space generally , it looks terrible to have the letters flat...

SamalanderOP•1/16/24, 4:42 AM

So the use case here is I'm making chat bubbles in CSS

SamalanderOP•1/16/24, 4:42 AM

I'd like to have that nice or

balance

balance

text wrap, but it causes that extra padding

SamalanderOP•1/16/24, 4:45 AM

Here's the pen for that if you want to play around with it: https://codepen.io/samalander0/pen/VwRPdeN

curiousmissfox•1/16/24, 4:51 AM

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.

curiousmissfox•1/16/24, 4:51 AM

But you need some space. It can't be flush against the side.

Ccuriousmissfox But you need some space. It can't be flush against the side.

SamalanderOP•1/16/24, 4:54 AM

Why not?

Ccuriousmissfox In this example there's still some white space. I would center it within the bub...

SamalanderOP•1/16/24, 4:55 AM

Centering it isn't really what users would expect with a chat bubble - most are left-aigned

curiousmissfox•1/16/24, 4:59 AM

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.

Ccuriousmissfox Look around the web. Do you see any professional example where text is flush aga...

SamalanderOP•1/16/24, 5:00 AM

Yes, I understand, but I'm suggesting it would look better without the extra white space as it would be more ballanced

SamalanderOP•1/16/24, 5:00 AM

Also, I want the padding to be consistent

curiousmissfox•1/16/24, 5:00 AM

good luck! I'm out of suggestions.

SamalanderOP•1/16/24, 5:01 AM

So centered within the bubble wouldn't really look right

SamalanderOP•1/16/24, 5:01 AM

Additionally, that wouldn't work since the P elelement is too big so can't be centered

curiousmissfox•1/16/24, 5:01 AM

Of course it can be centered

SamalanderOP•1/16/24, 5:01 AM

If the P element was the right size, that would solve all of the problems lol

curiousmissfox•1/16/24, 5:02 AM

You can't predict how it's going to rearrange respinsively or you could set the container to be exactly 20ch or whatever

curiousmissfox•1/16/24, 5:02 AM

But that'd just not how it works

Ccuriousmissfox Of course it can be centered

SamalanderOP•1/16/24, 5:02 AM

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

curiousmissfox•1/16/24, 5:06 AM

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.

curiousmissfox•1/16/24, 5:06 AM

It's too cramped

curiousmissfox•1/16/24, 5:07 AM

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.

Ccuriousmissfox It's too cramped

SamalanderOP•1/16/24, 5:07 AM

I'm aware lol

SamalanderOP•1/16/24, 5:07 AM

just taking it one step at a time

Ccuriousmissfox It all depends on what the content is inside. If that said "webdev" instead of "...

SamalanderOP•1/16/24, 5:08 AM

I'm trying to make this something that's dynamic/can work with differently sized text

SamalanderOP•1/16/24, 5:08 AM

It just feels like there should be something in CSS to make that <p> element the actual size of the text

SamalanderOP•1/16/24, 5:08 AM

Maybe I'll just have to do some sort of JS thing

SamalanderOP•1/16/24, 5:09 AM

Here's what I'm going for

SamalanderOP•1/16/24, 5:09 AM

Instead of this

SSamalander Maybe I'll just have to do some sort of JS thing

SamalanderOP•1/16/24, 5:29 AM

@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

SamalanderOP•1/16/24, 5:29 AM

SSamalander Click to see attachment

curiousmissfox•1/16/24, 5:31 AM

Good problem solving!