Remove product title hyphenation

Store Design
,
1

I’m using the Impluse theme and I see this question being asked a lot but none of the solutions have worked for me, or I’m doing something wrong. I want to make it so the titles on my products are not hyphenated mid word, the issue seems to only be on mobile, and for some reason doesn’t show in the theme editor, only on the live website. Any help would be appreciated thank you!

IMG_8300
IMG_8300650×244 19.3 KB

2

This usually happens because the mobile CSS is allowing automatic hyphenation or forced word breaking. You can try adding this at the bottom of your theme CSS file:

.grid-product__title,
.grid-product__title a,
.product-single__title,
.product__title {
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

In Impulse, go to Online Store > Themes > Edit code > Assets, then look for theme.css, theme.scss.liquid, or similar. If it still does not work, the product title classes may be different in your theme version, so inspect the title element on the live site and apply the same CSS to that class. You can also send me your site link, and I can check the live product title classes and give you the exact CSS code.

3

@elaurellel thanks for posting here.

This is usually a CSS issue on mobile. Try adding:

hyphens: none;
word-break: normal;
overflow-wrap: normal;

to your product title selector and see if that resolves it.

If it still doesn’t work, feel free to share your store URL. I’d be happy to take a look and help identify what’s causing it.

Can you please share the link so we can inspect it? Thanks

4

Hi @elaurellel

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

6

Thanks for the reply! The link is whisperinwax.com

7

Thanks for the reply! The link is whisperinwax.com :slight_smile: I will try this

8

@elaurellel Thanks for sharing the URL or store.

word “anyway”

I checked it on my laptop and couldn’t reproduce the issue. However, I tested it on an iPhone 13, and the words are breaking as shown in your screenshot.

I’d recommend making your CSS changes and then testing on a real iPhone. In my experience, this issue can be difficult to reproduce or verify accurately using Chrome DevTools’ device inspector.

WhatsApp Image 2026-07-03 at 10.20.59 PM
WhatsApp Image 2026-07-03 at 10.20.59 PM592×1280 116 KB

IPHONE

image
image456×852 96.6 KB

Chrome inspector.

11

Theme code includes this rule in assets/product-grid-item.css:

/* Prevent long words from breaking out of available space */
.grid-product__title {
  word-break: break-word;
  hyphens: auto;
}

To override it, add this code in “Edit theme”-> “Theme settings”(cog icon)-> “Custom CSS”:

.grid-product .grid-product__title {
  word-break: keep-all;
}

Hopefully you do not have very long words in your product titles.

12

Hi @elaurellel,

Go to online store > edit code

In assets folder Open theme.css or base.css file and at the bottom of the file paste this

.product-item__title, 

.card__heading {

  -webkit-hyphens: none !important;

  -ms-hyphens: none !important;

  hyphens: none !important;

}

Save.

13

This worked! Thank you so much!