Adding Hyphens to Text with the CSS hyphens Property

CSS Web Development Front End Technology

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 −

Example

Live Demo

<!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>