CSS hyphens Property

Last Updated : 09 Jun, 2023

The Hyphens Property in CSS tells us how the words should be hyphenated to create soft wrap opportunities within words.

Syntax:

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

Property Values:

none: This property means that the words are not hyphenated.
manual: This is the default property value. It means that the words are only hyphenated when the characters inside the word suggest hyphenation opportunities.
auto: This property lets the algorithm break the words at appropriate hyphenation points.
initial: The initial property value sets the property to its default value.
inherit: It inherits the property from its parent element.

Example 1: In this example, we are using the above-explained method.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | hyphens Property
    </title>
    <style>
        body {
            text-align: left;
        }
 
        h1 {
            color: green;
        }
 
        div {
            width: 50px;
            border: 2px solid blue;
            background-color: pink;
        }
 
        div.a {
            /* none: words are not hyphend  */
            hyphens: none;
        }
 
        div.b {
            /* manual: hyphenated when the characters suggest  */
            hyphens: manual;
        }
 
        div.c {
            /* auto: break the words at appropriate hyphenation points  */
            hyphens: auto;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>The hyphens Property</h2>
    <h3>hyphens: none</h3>
    <p>No hyphens</p>
    <div class="a">
        The words are not hyphenated
    </div>
    <h3>hyphens: manual</h3>
    <p>Hyphens only if needed.</p>
    <div class="b">
        It is the default prop-erty value.
    </div>
 
    <h3>hyphens: auto</h3>
    <div class="c">
        Hyph-ens where the algor­­­­­­­­-ithm decides if needed.
    </div>
</body>
</html>

Output:

Example 2: Here is another example of the above-explained method.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | hyphens Property
    </title>
    <style>
        body {
            text-align: left;
        }
 
        h1 {
            color: green;
        }
 
        div {
            width: 44px;
            border: 1.5px solid red;
            background-color: orange;
        }
 
        div.a {
            hyphens: none;
        }
 
        div.b {
            hyphens: manual;
        }
 
        div.c {
            hyphens: auto;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>The hyphens Property</h2>
 
    <h3>hyphens: none</h3>
    <div class="a">GeeksforGeeks</div>
 
    <h3>hyphens: manual</h3>
    <div class="b">Geeks-for-Geeks</div>
 
    <h3>hyphens: auto</h3>
    <div class="c">Geeks-forGe-eks</div>
</body>
</html>