Hyphens (-) break up words that extend beyond the edges of a text area. Only some web browsers do this automatically. If a word on a site extends beyond the browser, visitors may have to scroll to the side to read the word.
To keep your text visible, Squarespace automatically breaks (or "wraps") words that are too long to the next line. As part of this wrapping, we add hyphens to headers to show when a word is divided into two lines. This makes your site adaptable to mobile devices and other narrow browsers.
I don't want my text to hyphenate
There's no built-in way to disable automatic hyphenation, but if you don't like how it looks, try these options.
Make your text shorter
To avoid hyphenation in headers as much as possible, try adjusting the text so it takes up less space:
- Adjust the font, size, and spacing.
- Shorten the words.
- If your site supports scaling fonts, reduce the minimum size so the header can shrink as needed.
- Replace long email addresses with a mailto: link.
- Replace long URLs with linked text or a button.
Widen the container
A container is the invisible box your text is displaying within. For example, if your Text Block is displaying in a sidebar, the container would be the width of the sidebar.
The narrower the container, the more likely you'll see hyphenation. Here are a few options for adjusting the width of containers where text displays:
- Ensure your text is in a single column.
- If your site has a content inset, widen the inset.
- For items in a grid, decrease the number of items per row so each item gets more space. For example, in a Grid/stacked Blog Page, you'd reduce the Posts Per Row (Max) tweak in Site Styles.
- Experiment with increasing your site width. Site Styles usually has tweaks for this.
- Explore your template guide for more options.
Use custom code to disable hyphenation
If you have coding knowledge, you can add custom code to CSS to remove the hyphens. Please note that this is an advanced modification. Like all custom code, this isn't guaranteed to work and could interfere with your site's design.
This topic has come up in our Squarespace Forum, and you can view the post here for more information and example code.
Note: Custom code modifications fall outside the scope of our support. This means that we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. Custom code can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:
My text isn't hyphenating
In some instances, text on your site may not hyphenate automatically. For example, site titles don't hyphenate or break to the next line. Body text doesn't hyphenate. Some templates may also stop certain text from breaking, such as the banner text on York.
If this happens, either add a hyphen and space manually or follow the suggestions above for optimizing your text and widening the container.