Streaming live at 10am (PST)

Text Wrapping Quirks


#1

Been frustrated trying to figure out the logic behind some of the auto text wrapping - especially when going to smaller devices. Doesn't seem to be a consistent methodology behind where it decides to wrap the text.

For example:

I've Been Working On The Railroad All The Live Long Day

will look like the above on desktop but like this on iphone

I've Been
Working On The Railroad All The
Live Long Day

when it would look much better like this:

I've Been Working
On The Railroad All
The Live Long Day

Is there a way for me to tell it where to wrap depending on the device?


#2

Hi, if you have a particular project link, that you can share, we can give you a more precise answer, but it might be that you need to check the size of your texts at different viewport sizes. You can change the text properties in CSS settings for the text elements at each view port size, if necessary to achieve the look you want. You might try checking first the Tablet-portrait view first, check the text size, then check text properties:

And perhaps play around with the justification setting for each viewport. You can also adjust the character spacing between letters, so check that too, until the design is as you want it to appear for each viewport.

Cheers


#3

Thank you. That's what I ended up doing. Appreciate the reply.


#4

Check out the tablet view and the Sales column. See the way it way it wrapped the para between "of" and "inaction". No matter what I do I can't get ti to correctly wrap. Any ideas? Project Site


#5

Well not sure how much can be done as the text is just wrapping when there is no more space for a string of characters, however, you might try putting those 4 columns that are now on one row, and making that 2 rows of 2 columns each an give your text some room to breath smile If you just have a lot of text and not very many paragraph breaks, then you can run into this problem, and there is no native built in function in Webflow to prevent this. You might be able to achieve something with some custom css or js, but maybe easier to rethink the column structure, and space things out a bit... you will still get 4 columns on mobile, but on tablet, you will get more space with 2 columns to a row and it will not look so squished. That is just my opinion...


#6

As usual ... great advice - thank you. Looks much better now. See Allegro Project


#7

Would you mind looking at mine? I seem to have this issue with titles that dont want to wrap themselves on mobile and I would end up having to decrease the font size so small that everything looks disproportionate.

https://webflow.com/design/shed-light-photography?preview=0fb56f0359b447a4d944b34db09f0213

See the "lifetime client" page for a prime example


More Text Wrapping Quirks
#8