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

Subnetwork is a part of larger network like Internet

hyphens: manual

Subnetwork is a part of larger network like Internet

hyphens: none

Subnetwork is a part of larger network like Internet

In above example, notice the , 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  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 »