Squarespace: How to Turn Off Hyphens in Text

It’s happened to all of us, we create a Squarespace website and it looks perfect in desktop view, but when we switch to mobile, there are hyphens everywhere! Here’s a small snippet of code you can use to get rid of those pesky hyphens.

Place the following code in DESIGN > CUSTOM CSS. This code will prevent automatic hyphens on all devices.

p, h3, h2, h1, div, span, input, p a, ul li {
   -webkit-hyphens: manual !important;
   -moz-hyphens: manual !important;
   -ms-hyphens: manual !important;
   hyphens: manual !important;
}

That should target all the text. Feel free to add or remove classes/IDs as well if needed. So if you want H1’s to have hyphens, just delete the “h1” from the first line of the code.

If you want to prevent hyphens on mobile only, use the following code instead.

@media only screen and (max-width: 640px) {
 p, h3, h2, h1, div, span, input, p a, ul li {
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  hyphens: manual !important;
 }
}
MORE VIDEO TUTORIALS

Want more help? We have tons of YouTube tutorials on customizing your Squarespace website. Subscribe to our channel so you will know when a new tutorial is out.

Vigasan Gunasegaran About the author
vigasan@live.com

I've been working on Squarespace and WordPress websites for quite some time now. I enjoy how easy it is for clients to make updates to their own websites while using a CMS system. Outside of website design, I love good food, Netflix, and video games.

No Comments

Leave a Reply