Hi Tom,
Are you sure that you don’t have a plugin that’s causing the hyphenation? I know that there’s a typography plugin that does this, but can’t remember what it’s called. I’m like you and don’t like hyphenation and thus never used it. 😉
Can you provide a link to your site please? Maybe lead us to a page where this is happening? It would be good to figure out if it is the theme. I looked at the demo just now and couldn’t see any sign of this .
Hi Tom,
I just looked at the CSS again, and if you do a search for the word “word”, you’ll find:
.site-content article {
border-bottom: 4px double #ededed;
margin-bottom: 72px;
margin-bottom: 5.142857143rem;
padding-bottom: 24px;
padding-bottom: 1.714285714rem;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
I think that’s where the hyphenation is coming from. I think that you’ll need to override that in your child theme.
Hi. I was having the same problem, and found this article while looking for a way to solve it.
I think you just have to replace “-webkit-hyphens: auto;” for “-webkit-hyphens: none;”. It’s working for me, but as I just made the change I don’t yet know if it will cause any kind of formatting issue.
PS: thanks for pointing out the correct piece of code, Christine, it saved me a lot of time.
Thank you for this helpful info! (With all the technology we have who would want hyphens???)
So, certain plugins can cause hyphens on their own? I ask because I recently used the code noted above, and changed everything to : none, rather than : auto, so all page content is now hyphen-free. Yet my sidebar-widget-provided content still appears with hyphens. (I did just activate JetPack, could that be it, and if so, does anyone know where to find it there?)
Otherwise, is there a way to specify the : none all the way site-wide somehow? Thanks so much. 🙂
@jojojovich
I stumble on this thread after searching how to remove hyphen in Twenty Twelve theme. And I happens to found this code below. Maybe you already found it (since it’s post from 4 months ago), but I’ll write it here for others who maybe experience same problem.
.widget-area .widget {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
word-wrap: break-word;
}
Cheers 🙂
This functionality was annoying my client. I couldn’t see what the issue was. I knew it wasn’t ME adding hyphens as I do no proofing of “final content” before integration. In addition, I failed to find specific hyphens in editor page text.
The client remained adamant. LOL
After reading several hyphenation-related forum posts, I got here. I did the search as suggested for “word” and found nothing, but searching for “hyphen” located the offending css.
Mystery solved!
How do you search the CSS?
To search the CSS, you need to open open the file in your HTML editor or notepad and use the search or find tool.
