How to format text on your Squarespace 7.1 website to look professional using Text Wrap

Ever noticed a single word dangling all by itself at the end of a paragraph or headline? It throws off the design and makes your text look unbalanced. The good news is you don’t have to live with it.

With just a small bit of CSS, you can control text wrapping and keep your content looking polished and professional. In this tutorial, I’ll walk you through exactly how to apply a simple CSS rule to eliminate those awkward breaks and create cleaner, more consistent text across your site.

What is text-wrap balance and pretty?

CSS now gives us some smart tools to handle this problem: text-wrap: balance and text-wrap: pretty.

  • text-wrap: balance tries to distribute words more evenly across multiple lines. Instead of leaving one line super short and another overly long, the browser adjusts the wrap so your text looks balanced. This is especially helpful for headlines or short blocks of text where design really matters.

  • text-wrap: pretty focuses on avoiding awkward line breaks, like when punctuation or very short words get stranded at the end of a line. It makes your text “prettier” by nudging the wrap to create a smoother, more natural reading experience.

Why use them?

Cleaner text isn’t just about looks — it improves readability, keeps your design polished, and helps your site feel more professional. Visitors may not consciously notice when text wrapping is off, but they’ll absolutely notice when it feels consistent and easy to read.


Code:

Add this version to Custom CSS

// Text Formatting

h1, h2, h3, h4 {
text-wrap: balance !important;
}

p{
text-wrap: pretty !important;
}
Dave Hawkins

As a top tier Squarespace Expert and founder of Made by Dave, I bring over 10 years of Squarespace experience and 600+ bespoke website launches. Our process combines consultancy, design, project management and development for a collaborative and efficient experience with clients like you. Whether you need a new website or updates for your existing site, we'll help you get up and running.

https://madebydave.org
Next
Next

How to show a different desktop and mobile menu logo - Squarespace 7.1