CSS hyphens

The CSS hyphens property is used to create hyphen before the wrap of a word to the new line. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p{width: 60px; border: 1px solid red;}
      .a{hyphens: auto;}
      .b{hyphens: manual;}
      .c{hyphens: none;}
   </style>
</head>
<body>
   
   <h2>hyphens: auto</h2>
   <p class="a">Sub&shy;network is a part of larger network like Internet</p>

   <h2>hyphens: manual</h2>
   <p class="b">Sub&shy;network is a part of larger network like Internet</p>

   <h2>hyphens: none</h2>
   <p class="c">Sub&shy;network is a part of larger network like Internet</p>

</body>
</html>
Output

hyphens: auto

Sub­network is a part of larger network like Internet

hyphens: manual

Sub­network is a part of larger network like Internet

hyphens: none

Sub­network is a part of larger network like Internet

In above example, notice the &shy;, included in the long word Subnetwork, to create/insert a hyphen before the wrap of this word to new line, when hyphens is defined with manual keyword.

CSS hyphens Syntax

The syntax of hyphens property in CSS, is:

hyphens: x;

The vaue of x should be any of the following:

  • auto - used to automatically hyphenate the word
  • manual - used to hyphenate the word only at &shy; or at &hyphen;
  • none - used not to hyphenate the word
  • initial - used to use the default value
  • inherit - used to use the value inherited by the parent element

CSS Online Test


« Previous Tutorial Next Tutorial »