CSS - hyphens Property

Quiz

The hyphens Property

The CSS hyphens property controls how words are broken into lines when text is too long to fit on a single line. It improves the readability of text that wraps across multiple lines. The property only applies to block-level elements.

Syntax

The syntax for the hyphens property is as follows:

hyphens: none | manual | auto | initial | inherit;

Property Values

Value	Description
none	It disables the hyphenation.
manual	It is the default value that specifies manual hyphenation behavior for text at &hyphen or &shy.
auto	It allows hyphenation at appropriate hyphenation points, as determined by the browser.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Prevent Hyphenation with hyphens: none in CSS

To prevent the hyphenation of words, we use the none value. The words will not be broken into lines, even if they are too long to fit on a single line.

Example

In this example, we have used hyphens: none; to prevent automatic hyphenation of words.

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid #12782f;
         background-color: coral;
         width: 70px;
         padding: 10px;
      }

      .hyphenated-none {
         hyphens: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS hyphens property
   </h2>
   <h4>
      hyphens: none
   </h4>
   <div class="container">
      <p class="hyphenated-none">
         This is a muchmuchmuch larger building.
      </p>
   </div>
</body>

</html>

Manual Hyphenation with hyphens: manual in CSS

To allow hyphenation only at points where we have explicitly inserted hyphens using &hyphen or &shy, we use the manual value. This is a default value.

Example

In this example, we have used the hyphens: manual, to allow hyphenation only where we have manually inserted using soft hyphens ().

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid #12782f;
         background-color: coral;
         width: 70px;
         padding: 10px;
      }

      .hyphenated-none {
         hyphens: manual;
      }
   </style>
</head>

<body>
   <h2>
      CSS hyphens property
   </h2>
   <h4>
      hyphens: manual
   </h4>
   <div class="container">
      <p class="hyphenated-none">
         This is a muchmuchmuch larger building.
      </p>
   </div>
</body>

</html>

Automatic Hyphenation with hyphens:auto in CSS

To let the browser automatically hyphenate words at points that are considered to be appropriate, according to the language's hyphenation rules, we use the auto value.

Example

Here is an example using hyphens: auto value.

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid #12782f;
         background-color: coral;
         width: 70px;
         padding: 10px;
      }

      .hyphenated-none {
         hyphens: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS hyphens property
   </h2>
   <h4>
      hyphens: auto
   </h4>
   <div class="container">
      <p class="hyphenated-none">
         This is a muchmuchmuch larger building.
      </p>
   </div>
</body>

</html>

Supported Browsers

Property
hyphens	55.0	79.0	43.0	17.0	44.0

css_reference.htm

Print Page