How to remove automatic hyphens in Squarespace

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:

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;
}

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:

LIKED THIS POST?

More Squarespace tips & tricks this way

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.

If you're using Squarespace's commenting system on your blog, you'll notice you can't change the color of the "Post Comment" black button through your style editor. However, today I want to show you a super easy code trick that you can use to do that and have the button match the rest of your site!

So, you want to create a custom landing page in Squarespace for an opt-in, product, tripwire or even for Instagram and you want to eliminate all distractions from the page so all your visitors have no escape, right? (insert evil laugh here). In that case you probably want to remove the header and footer from your page – otherwise why would you be reading this – so let's dive into how you can do that in your template.

Want to add some CSS to just one page on your site, that's NOT an index section? Don't want to add the code to your page's settings? Then you're going to want to find your page's unique ID to make all the changes you like on just one page of your Squarespace site. But don't worry, it's pretty easy to find. And if you're wondering, yes, this applies to any non-index page of any template!

I know I'm not the only one still running around making sure everything on my site is ready for the GDPR deadline, and since that includes setting the EU cookie banner I wanted to share a quick snippet that my lovely friend Yana Dirkx from Bliss & Gold came up with to make the awful Squarespace cookie banner look much much nicer!

Not feeling happy with how Squarespace is resizing your fonts in mobile? Then let's do something about it shall we? In today's quick tutorial I'm going to show you how you can easily change the size of your fonts in mobile view. Let's go!