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;
Default Value:
- manual
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:
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:
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
Please Login to comment...