Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
mitch.bolton

Turn off automatic hyphenation?

Question

19 answers to this question

Recommended Posts

  • 8

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;
}


Share this post


Link to post
  • 9

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.

Edited by Syl

Share this post


Link to post
  • 1

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.

Edited by EmBee

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

@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.

Edited by justin1024
Initial Revision

Share this post


Link to post
  • 0

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; }

Share this post


Link to post
  • 0

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?

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...