How to remove automatic hyphens in Squarespace

When I talked about Changing the size of mobile fonts in Squarespace at the very end of the post I gave you a quick tip on how to turn off automatic hyphenation.

However, I wanted to do a separate post about it since there are some things you should consider when deciding to do it.

 

Removing hyphens in Squarespace

Please note: it's not always necessary to use CSS to get rid of hyphenation. Squarespace has some quick tips on what to do without code to fix long word cropping.

 

Whether you want to stop words from hyphening on desktop or mobile, you only need to use one single CSS property to do so:

hyphens: none; 

 

So if for example you're removing hyphens from all your site's paragraph text you can use:

p {
  hyphens: none;
}

 

And if you're removing them from one type of header you can do this:

h1 {
  hyphens: none;
}

 

Or maybe, if you want to get rid of them altogether, you can group everything at once like so:

h1, h2, h3, p {
  hyphens: none;
}

 

Note: if you're looking to do this just for mobile, you just need to set the corresponding media query for hyphens to be turned off. I have a free training on coding for mobile that shows you how to use them!

 

Now, usually, when you're removing the hyphens of paragraph text in Squarespace, there's a backup property that still breaks up the words when they become too long.

 

The problem is, that property isn't set for headings.

Which means that if you remove the hyphens from them, you'll end up with long words that overlook the size of your containers, like this:

Title overflowing page in Squarespace.png

 

Unless "entrepreneu" is a word in your branding, this doesn't look good.

 

So, if you want to remove hyphens from your headings, make sure to add the backup property that Squarespace is using for the body text called word-wrap.

 

When word-wrap is set to break-word, it basically haves your browser see if your long word fits on the next line before cutting it, and then it cuts it to fit your container.

However, like I mentioned in a previous post, keep in mind that by doing this you're letting your browser choose the best place to split your word if it doesn't fit in the next line, so in some cases you may end up with the final letter of your word dangling below the rest.

 

Nevertheless, this is how you can use that property to break your heading words without hyphens:

h1 {
  hyphens: none;
  word-wrap: break-word;
}
Title without hyphens in mobile in Squarespace.png

 

Alright friend so that's how you can remove hyphens in Squarespace, and how you can fix long headings overflowing your page when turning off their automatic hyphenation.

 

To keep in mind

  • You may need to override the original hyphens value in your custom CSS window by using the !important rule like so:

p {
  hyphens: none !important;
} 
  • If you want to extend browser compatibility then make sure to use the corresponding prefixes for the hyphens property:

p {
  -webkit-hyphens: none !important;
      -ms-hyphens: none !important;
          hyphens: none !important;
} 

 

Until next time,

B.

 

LIKED THIS POST?

I'd love it if you shared!


More Squarespace tips & tricks this way