Blank Space in Text Box Wrapping

Design help General
1

In hero banners I often want to center a button under a bit of text, but depending on the view size, there is blank white space on the right side of the text box that throws off the button centering. How do I get the text box to fit itself to the text inside across all view sizes?

(It’s currently showing the text filling the box in the 1280 and 1920 sizes, but not at the 992 and 1440.)

Thank you -

Here is my site Read-Only: https://preview.webflow.com/preview/playground-fpm?utm_medium=preview_link&utm_source=designer&utm_content=playground-fpm&preview=b50582ca6e67f87b19cd6b7a72d15b83&mode=preview

2

Hi,

Do you mean this highlighted space (red rectangle)?
Untitled

3

Yes! Is there a way to fix that?

4

Hi,

Try setting that text element to “Justify”, you can find this under the “Typography” tab.

Cheers

5

Kimmy, thanks, that’s a really clever idea, but it just forces the text to be really weirdly spaced between words, which is even worse. Is there a way to make the box only be the size of the text?

6

Hi,

You could try adding an “Embed” element which let’s you apply custom code to a desired class.

The custom code: (Remove the zeros next to the style word on top and on bottom of the code)

<00style>
.hero-text {
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
<00/style>

Then rename your “Hero Text” element to “hero-text” (without the quotation marks).
Then test it out in the live website.

Cheers

7

Sorry, that doesn’t seem to work either (I did test on a live site and the button is still not centered). And surely one doesn’t need custom code to get a text box to fit the contents??

8

Well, you could also apply small left-paddings on different resolutions to make it look like it’s centered, but then again not all lines of text would be edge-to-edge in relation to its parent div.

In addition, you could use letter spacing to make the characters a little bit more evenly spaced, but this also doesn’t render text from edge to edge.

Also, in this thread @vincent does a bit of in-depth explanation of justified texts.

Cheers

1 Like
9

And adding paddings wouldn’t really help, because for each breakpoint there are hundreds of resolutions that all wrap differently. You might fix some but then it would break others.

It just boggles the mind that there isn’t a way to make a text box fit to its contents.