Turn off automatic hyphenation?

I’m running into an issue I never expected. Some of my page descriptions are hyphenating in smaller (mobile) layouts. Do you have any tips to avoid it?

You would first need to specify the mobile screen size you are targeting, and the element such as body text, site title or whichever element it's occurring with. It might look something like this for iPad:

@media only screen and (max-width: 640px) {
 body {
   word-wrap: normal;
   -webkit-hyphens: none;
      -moz-hyphens: none;
           hyphens: none;
}

You would add this to the CSS Editor.

That should do the trick if anyone is still wondering:

/* Hyphens */
p {
 -webkit-hyphens: manual !important;
    -moz-hyphens: manual !important;
     -ms-hyphens: manual !important;
         hyphens: manual !important;
}

Will cover everything, Safari, Firefox, iOS, Chrome… Tested using the Marquee template.

Works like a charm.

awesome :-)

I tried this and it works great — except one of the descriptions overlapping the parallax images runs outside of the white container. It's only one of them for some reason... The other two work great.

Anyone know what would cause this or how I can fix it?

Thanks! It took me a little searching to find this. I was searching word wrapping, word dashes, etc. This fixed my issues of my index text boxes being wrapped weirdly on an iPad 2 and in Firefox. I didn't have the same issue with Chrome, so weird.

I am using the Montauk template and this did not work for me. Any other solutions? Thanks!

Thanks! I added h1, h2, h3, p That really helped.

To have this working for headings and body text be sure to add h1, h2, and h3 like this:

p, h1, h2 {
  -webkit-hyphens: manual !important;
     -moz-hyphens: manual !important;
      -ms-hyphens: manual !important;
          hyphens: manual !important;
}

nice, this works in pacific. thank you.

This didn't work for me in Pacific. Do I just paste this into PAGE HEADER CODE INJECTION?

@goodandnice Which solution are you referring to? Please make sure that you are only adding answers to posts when you have an answer to provide. Otherwise, you will want to add your response as a comment.

hey thanks this works great

if anyone is wondering, i pasted into design/custom CSS

This worked, THANK YOU!!! FYI You need to post this in the Desgin>> Custom CSS portion of your site.

This worked for me too, thank you. :)

It worked on Thorne. Thank you!Since the text I was wanting to apply the code to is formatted as Header 2 textI used it with h2 only p, h2 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; }

This worked great! Thanks so much.

Sorry to be slow (no coding experience whatsoever) but I am having this in Alex with the description on my banner image. I have tried to copy and paste this in the Advanced section in the banner but nothing happens. Any ideas?

This worked on Rally, thanks!!