Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Hyphenation

  1. withwords1
    Member

    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.

  2. designsimply
    Staff

    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.

  3. withwords1
    Member

    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.

  4. designsimply
    Staff

    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

  5. withwords1
    Member

    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?

  6. designsimply
    Staff

    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:

    http://cl.ly/N4Fz

    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?
    http://en.support.wordpress.com/make-a-screenshot/

    Also, what browser and browser version are you using?

  7. withwords1
    Member

    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?

  8. designsimply
    Staff

    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 {
    hyphens:none;
    -webkit-hyphens: none;
    -moz-hyphens: none;
}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags