CSS Reference Property

hyphens 2z4v5x

The hyphens property controls the hyphenation of text. 6a6l4i

Hyphenation allows the controlled splitting of words onto 2 lines to improve the layout of text when wrapping lines, typically splitting words at syllabic or morphemic boundaries and visually indicating the split (usually by inserting a hyphen, U+2010). In some cases, hyphenation may also alter the spelling of a word.

Using the hyphens property you can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present.

One important thing to keep in mind is that hyphenation will work only when the lang attribute if defined where you want the hyphenation to be applied, because hyphens are language-specific, and each language has its own rules for hyphenation which determine appropriate hyphenation points in words. So You must specify a language using the lang HTML attribute in order to guarantee that automatic hyphenation is applied in the language of your choice (if an appropriate hyphenation dictionary for that language is available). On XML, the xml:lang attribute must be used.

Use the simplest solution and declare it on the html tag, like:

<html lang="en">

This lang attribute does not work on a <p>—no browser picks up the language. It works fine on a div, though. So if a certain section of a page is in a different language, add the lang attribute to something above a p and test hyphenation properly.

CSS Text Level 3 does not define the exact rules for hyphenation, so the same text’s hyphenation may vary from browser to browser.

Official Syntax 55184y

Syntax:
```
hyphens: none | manual | auto
```
Initial: manual
Applies To: all elements
Animatable: no

Values 584j31

none

Words are not broken and/or hyphenated at line breaks, even if characters inside the words suggest where a hyphen could or should go. Words broken by setting the word-break or word-wrap properties also won’t be hyphenated.Lines will only wrap at white spaces, unless specified otherwise by the word-break or word-wrap properties. See word-wrap for more.

auto

Words may be broken at appropriate hyphenation points either as determined by hyphenation characters inside the word or as determined automatically by a language-appropriate hyphenation resource. Manually-defined hyphenation characters inside a word (see below), if present, take priority over automatically determining hyphenation opportunities within the word.

manual

Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. There are two Unicode character that can be used to manually specify potential line break points within text:

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.
U+00AD (SHY)
A “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.

Notes z5jo

Using explicit potential line breaks will allow the browser to break words where these breaks are defined even if no hyphenation is specified with CSS.

Examples 3e5p5z

The following will tell the browser to break words where appropriate (depending on the language rules) and add hyphens where the words are broken. The example does not include vendor prefixes for the sake of brevity. Make sure you add all necessary prefixes as required.

p {
  hyphens: auto;
}

And of course in order for the above property to work, we’d set the lang attribute on the html element to the language of our choice.

<html lang="ar">

Live Demo 2x4j2k

Have a look at the live demo (please see it in a browser that s the property full):

View this demo on the Codrops Playground

Browser k5t66

CSS Hyphenation 4m3gm

Method of controlling when words at the end of lines should be hyphenated using the "hyphens" property.

W3C Working Draft

ed from the following versions:

Desktop 3n671n

55
43
10*
42
5.1*

Mobile / Tablet 4q224p

4.2*
66
No
66
60

* denotes prefix required.

ed:
Yes
No
Partially
Polyfill

Stats from caniuse.com

Referencia de CSS3 325u2m