I need automatically hyphenation for long words or links (like “hyphens: auto;” in css). At the moment the words aren’t shown fully on a mobile device.
In webflow I can manage it with two textblocks. One for desktop with the long word and one for mobile with a hard-texted hyphen. But that this isn’t a good solution.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Add the following code to an code embed element in your project:
Just change the quotation marks for your element class (remove the quotation marks)
Can you say me where I can add code in webflow? Is this possible when the website isn’t published yet?
CSS code works anywhere in the designer and yes you can see the results right there before publishing the site.
This does not work in my case
But here it works (custom Coding, without Webflow):
What do I do wrong?
hey, what is my element-class? I want this code to work on my whole project. @aaronocampo
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:
- mark it, click the brush icon to break the class
- give the class an own name, like “hyphen-text-mobile”
- Hide in mobile landscape mode and upwards. Voila.
Really still seems to be the best solution. All the hyphens: auto stuff will create some pretty weird words and breaks at some point. Cheers!