Streaming live at 10am (PST)

Need your help on text-wrap


#1

Hey folks!

I’m missing something really simple… but it drives me crazy.
I want to mimick imessage bubbles. I have a problem with word-wrapping, word breaking, overflow-something, and I can’t find the trick.

You’ll see on the image and shared site that breaking line causes a large amount of unwanted space in de

div. I tried pretty much everything with no success…

What am I missing there?

Thank you for your suggestions!


Here is my site Read-Only: https://preview.webflow.com/preview/imessage-test?preview=e0be6b6f45ae30df288c09781f0d0f95


#2

Hi there @gnamouric

Don’t know how familiar your with Webflow, css and custom code but try adding this css
word-break: break-all;
to your element. It won’t show inside designer you need to publish fot it to work.


#3

Thank you! Kinda worked, but word don’t break anymore now…


#4

Try this one

overflow-wrap: break-word;


#5

Hi,

  1. If you put the CSS inside of a Custom Code component (in the viewport), then you can see the effects right in the Designer.
  2. you can add a hyphen property with value auto to add a hyphen when the words break. The language must be defined in the browser settings, and what’s breaking must be a word in its dictionary.