Jump to content

How to keep the word "E-commerce" from breaking?

Recommended Posts

I have a problem with the site automatically breaking the word "E-commerce" to another row.

image.png.b905d32da1b76de229c2ef2efb293225.png

So far I have tried using the non-hypen on mac, which made the text look like this: 

image.png.c9ac06f2a1475e11d535947efbafa60a.png

 

I also tried adding custom CSS code, but nothing happened: 

p, h3, h2, h1, div, span, input, p a, ul li {
   -webkit-hyphens: manual !important;
   -moz-hyphens: manual !important;
   -ms-hyphens: manual !important;
   hyphens: manual !important;
}

Changing the container size, design or text size is unfortunately not an option. Thanks!

 

image.png

Edited by Ete
Link to comment

Yes, the problem you have with the code is that you're setting the hyphens to only break manually, but that's what you're doing with e-commerce, manually adding a hyphen.

The only thing I can suggest is that you use eCommerce rather than E-commerce, that way you don't have a broken word that you get no matter what hyphen or symbol you use for the dash.

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
3 hours ago, Ete said:

Changing the container size, design or text size is unfortunately not an option. Thanks!

 

What is the desired outcome then?

If there isn't space to fit the whole word, the only options are resizing the text so it'll fit or increasing the container size (which might not work on mobile).

Perhaps you can share the link for us to examine too as that'll make it easier.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

you should use a non-breaking hyphen instead of your standard one.

Its unicode character is U+2011. if you find a character map (such as the windows one below) you can just find the code in a font that supports it and then copy that character, and then paste that into your text box and it will not break there. With custom fonts it might not be supported, we'd have to know exactly what your font was, but it'll probably be fine. you can see on the right how that changes the break when you paste it in.

image.png.f7dee61b9cfcffa516bd236e8b7a3f1e.png image.png.76b11386cf259bfa7d64867e05298325.png

 

The html code for this non-breaking hyphen is ‑ so you can also directly write this in if you use a markdown block instead of a text box. In the screenshot below the second box is a markdown block

image.png.b8633a1cdcd3ec59abf47a6faa35a172.png

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

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