Not sure if this is a bug or if webflow purposely deactivated this. But since last week or so, it’s not possibly anymore to paste the html code “” into a headline or paragraph element.
This was the best way to solve the problem when a long headline is going out of the viewport of a mobile device and a senseful hyphenation was needed. This is especially important for german websites, which my work consists mostly of.
It would be great to know if others have noticed the same or don’t have a problem with this at all and can still paste these code bits.
Thanks for posting about this. I spoke with the team some more and we don’t have support this functionality at the moment.
We’ve recently updated how the Webflow Designer handles text and content editing. It looks like characters like ­ were previously able to be used in our old Rich Text by happenstance rather than by design, but the new update doesn’t have this same functionality.
I’ve filed an internal enhancement request to get this added to our new content editor as a feature though, so hopefully you will be able to resume using this sort of shy-tag soon.
I’ll be sure to post back here as soon as I have an update.
Hi Brando! Please do everything you can! This is a very important feature to handle text for responsive design, especially in Germany with our very long words. We love long words. It’s a kind of hobby and passion in Germany to create long words. So, please please fix it asap!
Thanks a lot for looking into this and filing an internal request!
It would be great if we could get this small feature added to webflow again soon. This sadly is quite a hinderance for us german webdesigners if we can’t use the ­ tag.
Words like “Datenverarbeitungsvorgänge” or “Ausbildungsverhältnissverträge” are killing us in large headlines.
If I noticed some weird behavior with the text element, where would be the best place to message you guys about it? Should I open a new bug thread here in the forums?
As Brando mentioned, we’ve recently updated how the Webflow Designer handles text and content editing. Characters like the soft hyphen were previously able to be used in our old Rich Text by happenstance rather than by design, but the new update doesn’t have this same functionality.
However, there is a small workaround. With the most recent update, a soft hyphen can be added by pasting in the following where you would like the soft hyphen to occur (the soft hyphen is nested between the brackets):
[]
Then, delete the brackets that are around the soft hyphen
Thanks for the tip with the workaround. I actually didn’t yet think of just copying an already placed ­ tag from my own project.
And thanks as well for creating this small page (even with a video!) where we can copy the ­ tag from!
@mistercreate Great! Many thanks! For us German designers a soft hyphen is really necessary.
It is a bit more complicated then pasting the code snippet. Is this the final solution or will there be another handling or native solution in the future?
Go to the Project Settings / Custom Code and Insert this CSS Hyphen snippet (maybe without !important;) into your Head Code. Change the .yourcssclassname into your Class names or Classes (separated by comma) .h1, .h2, .h3
<style>
.yourcssclassname
{
word-break: break-word !important;
-webkit-hyphens: auto !important;
-moz-hyphens: auto !important;
-ms-hyphens: auto !important;
-o-hyphens: auto !important;
hyphens: auto !important;
}
</style>
Set the Language of your Website to «de» for German. Just under the Head Code in the Project Settings.
Yeah, that is a good solution too. Probably really useful for people in need of this and stumbling on this thread.
I personally don’t like using this for my headlines and text, since this way hyphens every syllable if required. I find this can make a text visually quite unpleasant to look at, because it can generate a lot of hyphenated words in a longer text.
into your Head Code. Change the .yourcssclassname into your Class names or Classes (separated by comma) .h1, .h2, .h3
