How to break long string of text inside a grid?

[skinpores]

We have a few long strings of text that we want to break as screen size gets smaller.

We included the following in the site’s head section (under project settings page):

.circular-display-example, .circular-headings-example {overflow-wrap: break-word; word-wrap: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;}

This was based on the solution from this thread: Break/wrap link in mobile view - #15 by AlexManyeki

But the strings of text didn’t break, and we want them to break responsively as the width of grid 5 changes.

Can anyone help please?

Thanks!

Our read-only link is here

[Henrik93 (Henrik)]

Late to the party but… Just adding a “not-so-geeky” solution, but this has worked for me.

I add the hyphen in the mobile view, where i need it to be, and then:

1. mark it, click the brush icon to break the class
2. give the class an own name, like “hyphen-text-mobile”
3. Hide in mobile landscape mode and upwards. Voila.