CSS hyphenate-limit-chars Property

Last Updated : 03 Feb, 2023

The minimum word length and the minimum number of characters before and after the hyphen are both specified by the CSS hyphenate-limit-chars property.

You have detailed control over text hyphenation thanks to this attribute. Better typography is made possible by this option since it allows you to avoid problematic hyphenations and establish the right hyphenation for many languages.

Syntax:

/* Numeric values */
hyphenate-limit-chars: 5 2 2;
hyphenate-limit-chars: 5 2;
hyphenate-limit-chars: 5;

/* Keyword values */
hyphenate-limit-chars: auto auto auto;
hyphenate-limit-chars: auto auto;
hyphenate-limit-chars: auto;

/* Mixed values */
hyphenate-limit-chars: 5 auto 2;
hyphenate-limit-chars: 5 auto;
hyphenate-limit-chars: auto 2;

/* Global values */
hyphenate-limit-chars: inherit;
hyphenate-limit-chars: initial;

Default Value:

manual

Property Values:

x y z: The first number is the shortest word length necessary before hyphenation. The second parameter indicates how many characters must come before the hyphen. The minimal number of characters after the hyphen is the third value.
x y: The first number is the shortest word length necessary before hyphenation. The second parameter indicates how many characters must come before the hyphen. After the hyphen, the minimum number of characters will be set to the second value.
x: The value is the shortest word length necessary before hyphenation. The auto setting will be used for the minimum number of characters before and after the hyphen.
auto: The user agent will select a suitable value for the current layout if an “auto” is set for any of the values. The following default values will be applied unless the user agent is able to determine a better value:

Example 1: This example describes how the hyphenate-limit-chars property works.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <style> 
        p { 
          hyphens: auto; 
          hyphenate-limit-chars: 5 2 2; 
        } 
    </style> 
</head> 
<body> 
    <h1 style="color:green;">GeeksforGeeks</h1> 
    <h2>hyphenate-limit-chars Property</h2> 
    <div>Content 1</div>  
    <p>The minimum word length and the minimum number of characters  
        before and after the hyphen are both specified by  
        the hyphenate-limit-chars CSS property.</p> 
</body> 
</html>

Output:

Example 2: In this example, we are using auto as the value for the hyphenate-limit-chars property.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <style> 
        p { 
          hyphens: auto; 
          hyphenate-limit-chars: auto auto auto; 
        } 
    </style> 
</head> 
<body> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h2>hyphenate-limit-chars Property</h2> 
    <div>Content 1</div>  
    <p>The minimum word length and the minimum number of  
        characters before and after the hyphen are both  
        specified by the hyphenate-limit-chars CSS property.</p> 
</body> 
</html>