CSS - hyphenate-character Property

Quiz

CSS hyphenate-character property allows you to specify the character that should be used as the hyphenation point when text is hyphenated using the hyphens property. When text is hyphenated, the browser will insert a hyphen character at appropriate points within words.

Syntax

hyphenate-character: auto | string | initial | inherit;

Property Values

Value	Description
auto	Suitable character is selected by the browser based on the current typography conventions. Default.
string	It specifies the character to be used at the end of line before a hyphenation break.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Hyphenate Character Property

The following examples explain the hyphenate-character property with different values.

Hyphenate Character Property with Auto Value

To allow the browser to use its default hyphenation character for breaking words which typically is a standard hyphen (-) or another character defined by the browsers settings for hyphenation, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         width: 80px;
         border: 2px solid blue;
         hyphens: auto;
         hyphenate-character: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS hyphenate-character property
   </h2>
   <h4>
      hyphenate-character: auto
   </h4>
   <div>
      CSS hyphenatecharacter auto
   </div>
</body>

</html>

Hyphenate Character Property with String Value

To use different characters for hyphenation, we specify the character in string to the hyphenate-character property. The specified character(s) will be used as the hyphenation character when breaking words. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         width: 80px;
         border: 2px solid blue;
         hyphens: auto;
      }

      .box1 {
         hyphenate-character: "=";
      }

      .box2 {
         hyphenate-character: "*";
      }

      .box3 {
         hyphenate-character: "%";
      }
   </style>
</head>

<body>
   <h2>
      CSS hyphenate-character property
   </h2>
   <h4>hyphenate-character: "="</h4>
   <div class="box1">
      CSS hyphenatecharacter "="
   </div>
   <h4>hyphenate-character: "*"</h4>
   <div class="box2">
      CSS hyphenatecharacter "*"
   </div>
   <h4>hyphenate-character: "%"</h4>
   <div class="box3">
      CSS hyphenatecharacter "%"
   </div>
</body>

</html>

Supported Browsers

Property
hyphenate-character	106.0	106.0	98.0	17.0	92.0

css_reference.htm

Print Page