How to Remove Automatic Hyphenation on Squarespace Websites

SquarespaceWebsite

Oct 10

This post may contain affiliate links. I may receive a commission for purchases made through these links (at no cost to you.)

REMOVE automatic hyphenation squarespace.png

I’m working on updates to a Squarespace website that was created in 7.0 and when I checked what it looked like on mobile, I found that it was hyphenating words wherever!!

It did not look good.

Squarespace will automatically hyphenate (or "wraps") words that are too long to the next line.

This makes your site adaptable to mobile devices and other narrow browsers; but, it may not always hyphenate at a proper breakpoint. This was corrected in Squarespace 7.1 so that there isn’t any odd hyphenation. Thank you Squarespace!!

If you don’t want to use Custom CSS to stop the hyphenation, some other suggestions you can try include:

Adjust the font size until there is no hyphenation
Use less words
Make the width wider

If you use the above suggestions, keep in mind that there are so many different device sizes. It may look good on one device but not on another. That’s why I find CSS the easiest way to go.

In some instances, text on your site may not hyphenate automatically, including:

Site titles
Body text
URLs
Email addresses

Some templates in Squarespace 7.0 may also stop certain text from breaking. When I work with a 7.0 site, I will generally add the Custom CSS so I don’t have to worry about which 7.0 template will or won’t hyphenate.

If you’re with me and hate hyphenated text and want an easy way to stop this from happening, here you go!

To add the CSS, go to Design / Custom CSS and add the code below.

p, h1, h2, h3 {

-webkit-hyphens: manual !important;

-moz-hyphens: manual !important;

-ms-hyphens: manual !important;

hyphens: manual !important;

}

If you enjoyed this article, pin it to Pinterest!