CSS | hyphens Property

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:

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

Example-1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <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>

chevron_right


Output:

Example-2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <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>

chevron_right


Output:

Supported Browsers:

  • Google Chrome 55.0
  • Internet Explorer 10.0 -ms-
  • Mozilla Firefoz 43.0
  • Safari 5.1 -webkit-
  • Opera 44.0


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.