Adding Hyphens to Text with the CSS hyphens Property

Using the CSS hyphens property, we can specify how hyphens are added in text.

Example

The following examples illustrate CSS hyphens property.

<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 20%;
   border: 2px groove lime;
   margin: 10px;
   padding: 10px;
   hyphens: none;
   -webkit-hyphens: none;
   -ms-hyphens: none;
}
div:last-of-type {
   hyphens: manual;
   -webkit-hyphens: manual;
   -ms-hyphens: manual;
}
</style>
</head>
<body>
<div>
abcdefghijklmnopqrstuvwxyz
</div>
<div>
abcdefghijklmnopqrstuvwxyz
</div>
</body>
</html>

Output

This will produce the following result −

Adding Hyphens to Text with the CSS hyphens Property

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 10px;
   padding: 10px;
   width: 15%;
   border: 2px ridge darkblue;
   background-color: peachpuff;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}
</style>
</head>
<body>
<div>
abcdefghijklmno-pqrstuvw-xyz
</div>
<div>
abcdefghi-jklmnopqrstuvw-xyz
</div>
</body>
</html>

Output

This will produce the following result −

Adding Hyphens to Text with the CSS hyphens Property