• Author
  • #1154143


    Hi. I’m using the template Twenty Twelve and would like to set the CSS so it does NOT hyphenate. I believe the correct CSS property/value is hyphens: none; but can someone tell me the correct selector? Thanks!

    The blog I need help with is randomactsofwriting.wordpress.com.


    In general, there are two different CSS properties for hyphenation:
    1. http://www.w3.org/TR/css3-text/#hyphens
    2. http://www.w3.org/TR/css3-text/#overflow-wrap

    Try them out and if you’re still having trouble, please post a link to where you’re seeing the hyphenation happening and include a note about what you’ve tried already to prevent it.



    Thanks for the reply. I am pretty sure I can find my way through the CSS property options by trial and error, but I ‘m having a hard time reading the template’s CSS and can’t figure out what Selector to use to change the body of the blog post. I believe the line of code I need to write is something like this:

    XX { hyphens: none; }

    So I just need help identifying what the XX is in the current code.


    That all depends on where you’re seeing the hyphens. Also, it’s possible the “hyphens” property is not the right thing to use depending on how the hyphens are getting added. The most helpful thing you can do is link to an example on your blog where you are currently seeing hyphens so someone can help you take a closer look at a specific example. It’s possible WordPress has some PHP programming in place to prevent orphans which overrides CSS like you are trying to add.

    To answer your question more generally, the XX needs to be a CSS selector that matches whatever text you’re targeting. Also, keep in mind that the rules I mentioned earlier only apply when soft wrapping happens.

    So, in the Twenty Twelve theme, to target widget titles, you would use this as the selector:

    .widget-area .widget h3



    Got it! Sorry – didn’t mean to be so general. : )

    In particular, I’m not thrilled with how the hyphens are working in the actual post content. If you look at (http://randomactsofwriting.wordpress.com/2013/02/13/lessons-in-snow/), you can see how so many of the words are breaking awkwardly: re-ports, as-sortment. I’d rather have the text not hyphenate at all. Is that possible?


    The plot thickens. I don’t see breaks in those words at all. When I check http://randomactsofwriting.wordpress.com/2013/02/13/lessons-in-snow/ here is what I see:

    Screen Shot 2013-02-21 at 11.47.54 AM.png

    Can you make a screenshot of your entire browser window and post a link to it here so we can try to see what you’re seeing?

    Also, what browser and browser version are you using?



    Hi there.

    There are two hyphenations in your screen shot. Second paragraph, first line as – sortment; third paragraph, first line drive – way.

    I’m using Safari 5.1.7; the same thing happens in Firefox 18.0.2.

    I would prefer no hyphenation, and I am pretty sure there is a CSS code to eliminate that. What I don’t know is what selector controls the main content area of the blog. Can you tell me that?


    You have a better eye than me! Also, I did first check it in Chrome where the breaks actually don’t happen.

    I researched this and found that you need to use special browser prefixes for WebKit browsers like Safari and Firefox. Try adding this to your Appearance → Custom Design → CSS editor:

    p {
        -webkit-hyphens: none;
        -moz-hyphens: none;

The topic ‘Hyphenation’ is closed to new replies.