hyphens

The hyphens property controls hyphenation of text in block level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present.

Note that hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a parent element. Not all languages are supported yet, and support depends on the specific browser.

Syntax

p {
  hyphens: none | manual | auto
}

hyphens: none

Words are never hyphenated at at line breaks, even if characters inside the word suggest where hyphenation could or should go.

hyphens: manual

Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. There are two characters that suggest line break opportunity:

  • U+2010 (HYPHEN): the "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered. Literally a "-".
  • U+00AD (SHY): an invisible, "soft" hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use ­ to insert a soft hyphen.

hyphens: auto

Words can be broken at appropriate hyphenation points either as determined by hyphenation characters (see above) inside the word or as determined automatically by a language-appropriate hyphenation resource (if supported by the browser or provided via @hyphenation-resource).

Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation points within the word.

hyphens: all

Deprecated, do not use. This was only in the spec temporarily for testing.

Demo

The demo below has a bunch of paragraphs and everything is set to hyphens: auto; to demonstrate the concept of hyphenation. The lang attribute is set to en on the parent element.

Check out this Pen!

Related Properties

  • word-break
  • hyphenate-character
  • hyphenate-limit-zone
  • hyphenate-limit-word
  • hyphenate-limit-lines
  • hyphenate-limit-last
  • hyphenate-resources
  • @hyphenate-resource

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
* 5+ 6+ none 10+ * 4.2+

Safari 5+ requires -webkit-, Firefox 6+ requires -moz-, IE 10+ requires -ms-, iOS 4.2+ requires -webkit-.

Chrome and Android browser actually support -webkit-hyphens: none, which is the default value, but none of the other values.

In Firefox and Internet Explorer, automatic hyphenation only works for some languages (defined with the lang attribute). See this note for a comprehensive list of supported languages.

If you are writing a web-based document that really need hyphenation, you can use Hyphenator.js which is a library based on a vast dictionary that will automatically inject soft hyphens and zero-width spaces into your content.

Without JavaScript, you'll have to rely on both hyphens and word-break. The following will give the best possible browser support (not perfect):

.hyphenate {
 -ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

Comments

  1. User Avatar
    Florian
    Permalink to comment#

    Is there any indication when/if Chrome will support hyphens: auto?

    I would strongly a
    dvise against brea
    k-all unless you w
    ant your text to l
    ook like this.
    

    It breaks words in the wrong place, doesn’t add hyphens and makes ‘hyphens: auto’ pretty much useless.

    Personally I’d rather have ‘ugly’ justified text, or text that leaves its container than that mess.

    • User Avatar
      Serkan
      Permalink to comment#

      Same happened when I tried it out. Break on false place and without a hyphen at all.

      How trustworthy is “Hyphenator.js”, it looks quite good, since my site is in English and German. Had someone any experience with this?

  2. User Avatar
    taigeair
    Permalink to comment#

    It’s strange Chrome doesn’t support hyphens…

    I just used hyphens and it works for Safari but it doesn’t for Chrome. See the word “neurotransmitter” on the table

    http://www.sleepmoo.com/store.html

    Since almost everyone is on Chrome, you’re saying we should use Hyphenator.js?

    *One note is hyphens works when you use Chrome on mobile.

    • User Avatar
      Tanny OHaley
      Permalink to comment#

      Hyphenation works in Chrome on iOS devices because it is using mobile Safari to render web pages.

  3. User Avatar
    Tomas M.
    Permalink to comment#

    Should we also add:

    word-wrap: break-word;
    

    ?

  4. User Avatar
    virakamrith
    Permalink to comment#

    It’s not support with Khmer unicode. How can I make it support Khmer unicode?

  5. User Avatar
    Adam Singer

    This was really helpful. Thanks!

  6. User Avatar
    esp

    Awesome – thanks! I’ve been trying to get rid of those hyphens so many different ways and none worked. I used your hyphenate class with attributes set to “none” and it works perfectly in firefox and IE. I like you.

  7. User Avatar
    Faux_Real
    Permalink to comment#

    Just saw a page today with odd breaks while using Chrome. So I did a search on what could going on and found this informative article.

    For reference to others who come across this article, it seems Chrome still does not support hyphens :(

    http://caniuse.com/#search=hyphen

  8. User Avatar
    Tanny OHaley
    Permalink to comment#

    I added this to my website in November 2012. I was able to justify text and it looked much better and was more readable. Then I tried it in Chrome. What a disaster. I had to turn off justification because it looks awful in Chrome.

    There were also issues with the number of words browsers could hyphenate in a paragraph that typographers would not like. I’d say it’s not ready. I still use it, but I’ve turned off text justification because of Chrome.

    When is Chrome going to support hyphenation? They are behind Firefox, IE, and Safari (mobile and desktop).

  9. User Avatar
    Noelle
    Permalink to comment#

    Shouldn’t it be -ms-word-break: break-word (instead of break-all)? For me, -ms-word-break: break-all just broke the words anywhere within the word and the -ms-hyphens:auto; had no affect.

  10. User Avatar
    Micah
    Permalink to comment#

    This needs to be updated. Firefox doesn’t play well with both hyphens: auto and word-break: break-all. I had to use @supports rule to make the hyphen to show up on FF 3x+.

    @supports not (hyphens: auto) {
        .class {
            word-break: break-all;
        }
    }
    
    .class {
        /* Non standard for webkit
         * overrides blink default */
        word-break: break-word;
    
        hyphens: auto;
    }
    
    • User Avatar
      Lynda
      Permalink to comment#

      Micah,

      I had similar issues with Firefox but was able to solve them. You can see my question on Stackoverflow what is going on: http://stackoverflow.com/q/28976543/825757

    • User Avatar
      Martino
      Permalink to comment#

      Hi Micah, thanks for this!

    • User Avatar
      Effeilo
      Permalink to comment#

      Don’t work for me. For FF 3x+, i use this :

      @supports not (-moz-hyphens: auto) {
          body {
              word-break: break-all;
          }
      }
      
      
      body {
        /* Old IE Support */
        -ms-word-break: break-all;
      
        /* Non standard for webkit */
        word-break: break-word;
      
        -webkit-hyphens: auto;
           -moz-hyphens: auto;
            -ms-hyphens: auto;
                hyphens: auto;
      }
      
  11. User Avatar
    Luqman Haji Barqab
    Permalink to comment#

    An option is to insert soft hyphens into the text in places where it may be broken

  12. User Avatar
    Mister Reader

    Hyphenation in web pages is unnecessary and ugly, especially considering that full justification should not be used.

    • User Avatar
      Mist a reader!

      In terms of responsive design it would be quite a good future to show long-spelled words even on small displays with a readable size. But as there still is a significant browser support lag, it’s not really usable so far in my opinion… unfortunately…

  13. User Avatar
    Michael
    Permalink to comment#

    I did a research[1] recently and found out that using word-break: break-all; in combination with hyphens: auto; doesn’t work as expected in Firefox as words are not hyphenated anymore. Instead, I found that you can use overflow-wrap: break-word which works great in Firefox and also on Opera Mini where word-break is not supported.

    .hyphenate {
      overflow-wrap: break-word
      word-wrap: break-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
    }
    

    [1] https://justmarkup.com/log/2015/07/31/dealing-with-long-words-in-css/

  14. User Avatar
    Julian
    Permalink to comment#

    @Effeilo Thank you, that worked for me in FF 41 and FF 44.
    @Micah I just tested your solution in FF 41 and it does not work.

    • User Avatar
      Julian
      Permalink to comment#

      I need to correct myself.
      @Micah your solution does not work in MS Edge!

      I just tested @Michael’s solution and it works in all browsers (Chrome, Safari, Firefox, Edge, IE9+). Thanks for sharing.

  15. User Avatar
    Laura
    Permalink to comment#

    So after reading this thread and reviewing various specs, to avoid hyphenation, I came up with this:

    .avoid-bad-hyphens {
      word-break: keep-all;
      overflow-wrap: normal;
      word-wrap: normal;
      -webkit-hyphens: manual;
      -moz-hyphens: manual;
      -ms-hyphens: manual;
      hyphens: manual;
      text-overflow: ellipsis;
    }
    

    NB: I’m using “manual” values because this most-often comes up in titles that use larger fonts. Giving editors the opportunity to insert a soft hyphen seems to make sense. The overflow ellipsis I threw in as a fallback (but it’s not tested). What do you think?

    • User Avatar
      Laura
      Permalink to comment#

      Clarification: text-overflow: ellipsis; is intended as a fallback if the last word doesn’t fit. Obviously it won’t help upstream in the block.

  16. User Avatar
    amn
    Permalink to comment#

    The article pointed by the link http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/, is a French translation of MDN. Just saying.

  17. User Avatar
    Tobias Buschor
    Permalink to comment#

    Please star this chromium issue and comment on it if you like to use hyphens:auto crossbrowser:
    https://bugs.chromium.org/p/chromium/issues/detail?id=47083

  18. User Avatar
    Thomas
    Permalink to comment#

    the snippet of the article should be updated, there are no reasons to declare

       ...
        word-break: break-all;
    
         // Non standard for webkit
         word-break: break-word;
        ...
    

    and using

         -ms-word-break: break-all;
         word-break: break-all;
    

    will simply force a break at random position in a word to go to a new line, avoiding hyphenation when supported

  19. User Avatar
    Luis
    Permalink to comment#

    Thanks Sara for the article. I tried to use some of your recommendations but all of them fail in one way or another.

    In my opinion hyphenation is a long way far from being practical. The best approach is to justify text and pray for the best. On tables I use ­ to hyphenate long words, otherwise on tablets and smartphones the result is a disaster. In short, unless all browser gurus agree to make standard rules all this is just a waste of time and a lot of wasted effort by idiots, like us, trying to make perfect web pages.
    Yes, yes, I know they are the idiots not us.

  20. User Avatar
    Derek
    Permalink to comment#

    In general, I think the hypens: auto property is one to avoid.

    Upon upgrading to Chrome 55.0.2883.95, this property caused serious issues with tabular data on my site:

    tabular data overlapping into neighboring columns,
    arbitrary breaks,
    and the failure for the browser to adjust the size of the column to the widest/biggest cell.

    The more I think about it, the more I just don’t see much use for this property at all…

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag