Support » Themes and Templates » How do you turn off the hyphen word breaking at the end twenty fourteen theme?

  • Resolved Shaunrafuse

    (@shaunrafuse)


    At the end of a line anywhere on my site if a word runs out of room it hyphens and half of it goes to the next line.. How do I fix this??

Viewing 15 replies - 1 through 15 (of 15 total)
  • If you have a child theme, then add this rule to the end of your child theme’s style.css file. If you are using a CSS plugin, like Custom CSS Manager, then you can use that.

    .entry-content,
    .entry-summary,
    .page-content {
       -webkit-hyphens: none;
       -moz-hyphens:    none;
       -ms-hyphens:     none;
       hyphens:         none;
    }

    That’s awesome thank you worked like a charm for the posts!!
    is there any way I can make it work for the sidebars, or more preferably the whole site???

    Add more selectors to the rule (these were the only selectors that I saw that had hyphens set to auto):

    .entry-content,
    .entry-summary,
    .page-content,
    .nav-links,
    .comment-content,
    .widget
     {
       -webkit-hyphens: none;
       -moz-hyphens:    none;
       -ms-hyphens:     none;
       hyphens:         none;
    }

    Worked perfect thanks so much!!

    I am having the same problem and after doing what you recommend I am still having hyphens. To recap: I added the code lines you mentioned to Appearances / Editor / Stylesheet and updated the file. What else should I do?

    @antoniocarrico, first of all, you should not edit the theme’s files directly. If the theme gets updated because of feature enhancements or security patches, then your changes will be lost. The correct way to make changes is to create a child theme, or, if you are just making changes to the CSS, then use a CSS plugin like Custom CSS Manager.

    Are you using the Twenty Fourteen theme? The rules above are specific to Twenty Fourteen. Can you please post a link to a sample page on your site so we can take a look?

    Thank you for your quick reply. My site is: http://www.onossodinheiro.pt.

    As it is written in portuguese the hyphenation is not done properly so it is very important for me to get rid of it.

    Thanks

    The hyphens that are part of the text will not be removed. The CSS rule only prevents the word from breaking at the hyphen.

    For example, take a look at the beginning of this paragraph:

    Quando as reformas ficam muito longe do que poderiam atingir, fica-se sempre a recear que os seus promotores estejam a seguir o conselho de D. Fabrício, príncipe de Salina, …

    The word fica-se has a hyphen within it. That hyphen will always show up because it is part of the text.

    For the hyphens property, there are three possible values:

    1. none – Do not break the word to the next line, even if there is a character (like a hyphen) which suggests a possible break point. So fica-se will always appear together.
    2. manual – Break the word if there is a character like a hyphen) which suggests where the break should occur. So if the width of the container is small enough, then the paragraph might look like this:

      Quando as reformas ficam muito longe do que poderiam atingir, fica-
      se sempre a recear que os seus promotores estejam a seguir o conselho de D. Fabrício, príncipe de Salina, …

    3. auto – break the word either at a character which suggests a break (like a hyphen) or according to rules established by “a language-appropriate hyphenation resource” (which is specified by the @hyphenation-resource rule). So even words which do not have a specific hyphen within them will become hyphenated.
    4. Note: Chrome does not support the hyphens property, so you will see hyphenation breaks in Chrome.

    Funny I have that problem with IE.. No breaks in Chrome, and I see no breaks in the whole site on all browsers except for in the primary sidebar in IE and I still haven’t been able to fix it.

    I tried adding the recommended code to the end of my style.css but that didn’t work. The only thing that worked was deleting all the offending hyphen: auto and word-wrap lines from the stylesheet.

    Is there a problem with editing the .css directly if I don’t manually update twentyfourteen? Does WordPress automatically update the theme thereby overwriting my changes?

    No, the theme will not be automatically updated. However, you will not be able to incorporate any bug fixes or security patches related to the theme. What you can do is save a copy of the CSS somewhere and copy it back in if you do upgrade the theme.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    @karen Rempel, Can you create a new thread to discuss that?
    http://wordpress.org/support/theme/twentyfourteen#postform

    You can always refer back to this thread if you need to. Thanks.

    Thanks, CrouchingBruin. Sounds easy enough to copy my CSS if I upgrade.

    Andrew, as per your request I created a new topic at:
    http://wordpress.org/support/topic/managing-changes-to-stylecss-in-twentyfourteen?replies=1#post-5791431

    Ive tried the solution above, without luck. A sample page is
    http://www.englishelectricrecords.net/artists/lost-garden/
    Strangely, I can’t find any references to “hyphen” in style.css ??

    Argh. editing the wrong site! Ignore this, can’t find out how to delete it..

    Moderator Jan Dembowski

    (@jdembowski)

    Brute Squad and Volunteer Moderator

    nick if you need support then per the forum welcome please post your own topic.

    Themes and Templates

    In the 5 months from this topic a lot has changed and your problem won’t get the attention it deserves in someone else’s resolved topic.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘How do you turn off the hyphen word breaking at the end twenty fourteen theme?’ is closed to new replies.