How to Turn Off Hyphens in Text on Squarespace

Table of Contents

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 turn off hyphens.

Prevent Hyphens on Desktop + Mobile

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.

Prevent Hyphens on Mobile Only

Place the following code in DESIGN → CUSTOM CSS. This code will prevent automatic hyphens on mobile only.

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