Streaming live at 10am (PST)

Text Overflowing


#1

Continuing the discussion from Text does not flow correctly:

Hi, regarding the issue for text not flowing correctly on certain elements on mobile view, discussed on the 2 topics linked below, which apparently was a bug which was already fixed, I'm having an issue which I'm wondering if it's part of the same thing, or if it's not an issue at all and it's just how things are supposed to work.

On a big heading for example, long words which are longer than the view width, overflow out of view, instead of flowing down to the next line. When you double click inside the element, the word gets nicely contained inside the element, flowing down to the next line, as I would like it to be, but as soon as you get out of the element, it overflows back again in one line. Is this ok and I should just use a smaller font, or is there something wrong here?

Try it out, I tried it even on a new site and get the same thing.

Thanks!

Dave.

http://forum.webflow.com/t/text-does-not-flow-correctly/3412,
http://forum.webflow.com/t/non-breaking-spaces-on-text-paragraph-or-header-elements/20809/41.


#2

Hi @Waldo, do you think maybe you could get some info on this? Thanks! :smile:


#3

Hey @davidvm

I found that that pasting in the text as plain text does the trick to stop this from happening. So just copy the text out and paste it in again as plain text instead (right click, paste as plain text, or Ctrl + shift + V, or Cmd + shift + option + v). Otherwise it's carrying some formatting from wherever it was copied.

Do you have an example of where this is happening? If so can you please share your read-only link?

Thank you,

Waldo


#4

Hi Waldo, thanks!

This actually happens on any text field with any long enough text (no spaces) that you enter, either writing it directly, or pasting it from plain text. It happens on any site. Here's a link to a test page:

https://preview.webflow.com/preview/escape-test-351730?preview=3d1899e99c56152287b87eaad76b2f52

Go to phone portrait (happens on any view) and add a long word to the heading. As you enter it, it flows down nicely. When you click out of the element, it overflows out of view in one line. Is that normal or is there something wrong?


#5

Hey @Waldo, any word on this? Thanks!


#6

Hey @davidvm as far as the headline overflowing, it's because the text isn't set to break "mid-word".

There's a CSS style property called "word-break" which has almost 100% support according to Can I Use. And the default setting is to Normal which usually breaks words by their "default" value (rather arbitrary definition I know). So you could use that in custom CSS, more info on how to do that available here.

OR

My recommendation is to decrease the font size to 2em and line height to 3em (type in "em" instead of "px" when using this font size setting) for the "Hero Heading" class.

I'm also going to add a Wishlist post requesting the ability to use this CSS style property as I can see the use-case for it. :smile:

Please let me know if you have any other questions, I'm standing by for your response :smile:

Thank you,

Waldo


#7

Thanks @Waldo! Good to know! I decreased font size.


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.