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.

 Live Demo

<!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>
abcdefghi­jklmnopqrstuvwxyz
</div>
<div>
abcdefghi­jklmnopqrstuvwxyz
</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>

Output

This will produce the following result −


Advertisements