Grow your CSS skills. Land your dream job.

hyphens

Last updated on:

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 not suppported 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. 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.

    • 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. 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.

  3. Permalink to comment#

    Should we also add:

    word-wrap: break-word;
    

    ?

  4. virakamrith
    Permalink to comment#

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

  5. Adam Singer

    This was really helpful. Thanks!

  6. 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. 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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".