Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Adding Hyphens to Text with the CSS hyphens Property
The CSS hyphens property controls how words are broken and hyphenated when they overflow their container. This property is essential for text layout, especially in narrow columns or responsive designs where text needs to wrap gracefully.
Syntax
selector {
hyphens: value;
}
Possible Values
| Value | Description |
|---|---|
none |
Words are not hyphenated, even at manual break points |
manual |
Words are hyphenated only at manual break points (­ or ‐). This is the default value. |
auto |
Words are automatically hyphenated based on the browser's hyphenation algorithm |
Example: Manual Hyphenation
The following example shows manual hyphenation using the soft hyphen character (­) −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 150px;
border: 2px solid #333;
padding: 15px;
margin: 10px;
font-family: Arial, sans-serif;
}
.no-hyphens {
hyphens: none;
}
.manual-hyphens {
hyphens: manual;
}
</style>
</head>
<body>
<div class="container no-hyphens">
<h3>No Hyphens</h3>
<p>Internationalization is a very long word.</p>
</div>
<div class="container manual-hyphens">
<h3>Manual Hyphens</h3>
<p>Inter­national­ization is a very long word.</p>
</div>
</body>
</html>
Two boxes appear: The first shows "Internationalization" overflowing its container. The second shows the word broken at manual hyphen points with visible hyphens.
Example: Automatic Hyphenation
This example demonstrates automatic hyphenation where the browser determines optimal break points −
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.text-container {
width: 200px;
border: 2px solid #007acc;
padding: 20px;
margin: 15px;
background-color: #f8f9fa;
font-family: Georgia, serif;
line-height: 1.6;
hyphens: auto;
}
</style>
</head>
<body>
<div class="text-container">
<h3>Auto Hyphenation</h3>
<p>Supercalifragilisticexpialidocious and antidisestablishmentarianism are extraordinarily long words that demonstrate automatic hyphenation.</p>
</div>
</body>
</html>
A bordered container with text where long words are automatically broken with hyphens at appropriate syllable boundaries, creating clean text wrapping.
Comparison of All Values
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.comparison {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.box {
width: 150px;
border: 2px solid #666;
padding: 15px;
font-family: Arial, sans-serif;
background-color: #fff;
}
.none { hyphens: none; }
.manual { hyphens: manual; }
.auto { hyphens: auto; }
h4 { margin: 0 0 10px 0; color: #333; }
</style>
</head>
<body>
<div class="comparison">
<div class="box none">
<h4>hyphens: none</h4>
<p>Pneumonoultramicroscopicsilicovolcanoconiosis</p>
</div>
<div class="box manual">
<h4>hyphens: manual</h4>
<p>Pneumono­ultra­microscopic­silico­volcano­coniosis</p>
</div>
<div class="box auto">
<h4>hyphens: auto</h4>
<p>Pneumonoultramicroscopicsilicovolcanoconiosis</p>
</div>
</div>
</body>
</html>
Three side-by-side boxes showing the same long word with different hyphenation behaviors: no breaking, manual breaks at specified points, and automatic algorithmic breaking.
Conclusion
The hyphens property is crucial for responsive typography and text layout. Use manual for controlled breaking with ­ characters, or auto for intelligent automatic hyphenation that adapts to different languages and contexts.
Updated on: 2026-03-15T15:29:43+05:30
115 Views
Advertisements