Understanding automatic hyphenation in version 7.0

Last updated February 14, 2024

Version 7.0 sites wrap words from one line to another using hyphens.

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.

Accessing this feature

This guide is for version 7.0. Text doesn't hyphenate in version 7.1.

long-header.png

long-header.png

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:

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.
  • 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.
  • If your site has tweaks for adjusting site or page width, try increasing it. You can find these tweaks in Site Styles.
  • If your site is on version 7.0, explore your template guide for more options, such as content inset settings.

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, including:

  • Site titles
  • Body text
  • URLs
  • Email addresses

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, replacing it, or widening the container.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.

Understanding automatic hyphenation in version 7.0