Open In App

CSS hyphens Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:  

Supported Browsers: The browser supported by CSS | hyphens Property are listed below:  

  • Google Chrome 13
  • Edge 79
  • Internet Explorer 10.0 
  • Mozilla Firefox 43.0
  • Opera 44.0
  • Safari 5.1 


Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads