Streaming live at 10am (PST)

Inserting a non-breaking hypen


Hi smile,

How can I insert a non-breaking hyphen (-)?

e.g.: -20%

Thanks smile


Hi @thierry_vilaysi, are you trying to keep the hyphen and the 20% from breaking apart from each other, or are you trying to keep a paragraph text to be split using a hyphen?

If you are just trying to create a non-breaking space with the -20%, then you can use some custom css to specify some class as non-breaking.. the example below is for non-breaking paragraph, but you can use this for any text class you setup for that -20% text you are working with.

Hopefully I understand correctly your question.

To accomplish this, you would need to add some custom css to your HEAD section of the Custom Code tab in your site settings. The actual nowrap css would be something like:

p { white-space: nowrap; }

Where "p" is the paragraph element, but you can apply this css to any class you have named for your text elements in your site.

I hope that helps. Cheers, Dave


I am currently dealing with the second option that Dave is suggesting, and need a way to make sure a word such as "e-commerce" does not split in two because of a line break. Any suggestions? Looks like Webflow accepts characters that can be pasted in, but not the correspondent HTML codes.

I am also trying to figure out how to get a low hyphen instead of a high hyphen. The screenshot below is an example, using the google font Merriweather. If I type in the same on, it appears correctly, but if I copy/paste that character into Webflow, the high hyphen appears.

On Webflow: line breaks, and hyphen is high (above the horizontal stroke of the letter "e"):

Low hyphen, as on Google Font: