Squarespace is a well-loved platform that’s intuitive and easy to learn, allowing small businesses and bloggers to create and manage their own site without any coding knowledge required. The built-in style editor offers many options, such as: customized colours, fonts, layouts, and more. However, there are some things the style editor just can’t do. That’s when CSS comes to the rescue!
In this tutorial, we’ll show you how to remove hyphens site wide — hyphens make reading your content difficult and let’s face it, they just aren’t cute. It’s not the most glamorous blog post, but these bits of code are necessary for EVERY Squarespace website!
Note: if you purchased a Squarespace template from The Styled Square, this code will already be included in your website CSS.
How to remove hyphens site wide:
Go to Design > Custom CSS
Paste the following code:
To prevent your words from hyphenating on web, tablet and mobile:
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}
To prevent your words from hyphenating on mobile only:
@media only screen and (max-width: 660px) {
p, h1, h2, h3 {
-moz-hyphens: none;
-ms-hyphens: none;
-webkit-hyphens: none;
hyphens: none;
}}
PS. WE RECOMMEND ADDING BOTH CODE SNIPPETS TO YOUR WEBSITE!
Like this tutorial? Save it for later & share it on Pinterest!
More tutorials
Learn how to build a complete brand identity from scratch using Claude AI and Canva, no designer or big budget required. This step-by-step tutorial covers audience research, brand strategy, logo creation, and launching your brand on Squarespace.
Discover the best Squarespace integrations for 2025. Grow your site with Flodesk, SEOSpace, SquareKicker and ThriveCart plus exclusive discounts inside.
Learn how to use Squarespace's new Block Animations feature to add motion to individual blocks on your site, no CSS or custom code required!
Squarespace’s new Transforms tool is changing how you customize your site, giving you more creative control directly within the Fluid Engine Editor. It allows you to move, scale, rotate, and adjust the opacity of image and text blocks, redefining the rigid grid system Squarespace is known for. With this feature, you can create more dynamic, custom layouts in Squarespace 7.1 without a single line of custom CSS.
With 120+ free Squarespace templates available, it can be challenging to figure out which ones are actually optimized for online shopping and which will support your store’s long-term growth.
To help you skip the overwhelm of endless browsing, we’ve curated a list of the best free Squarespace 7.1 templates for eCommerce and online stores. Each one features clean layouts, mobile-friendly design, and built-in functionality tailored for product-based businesses.
This guide will show you how to create a Coming Soon page using the Squarespace Lock Screen feature, and how to set it up step-by-step for a smooth, stress-free redesign.
Squarespace 7.1 now allows you to hide blocks on mobile or desktop without CSS. Follow this 2025 guide to optimize your layout and improve your mobile design.
Learn how to upload and use custom fonts in Squarespace 7.1 with the 2025 update. Follow this step-by-step guide to apply brand fonts to your site without using CSS.
Learn how to create and connect a custom 404 page in Squarespace 7.1. Follow our step-by-step tutorial to improve your website’s user experience and keep visitors engaged.
Struggling to create beautiful, high-converting emails? We’ve got you covered! To help you save time, we’re giving away five professionally designed Flodesk email templates—completely free.
Whether you're launching a new product, nurturing leads, or sending a special offer, these templates will make your emails stand out while keeping things simple and effective. Download them now and start sending emails that look as good as they convert.
