CSS hyphens Property

The CSS Hyphens Property specifies how words should be hyphenated in order to create soft wrap opportunities within words.

Syntax

hyphens: none | manual | auto | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    div {
        width: 75px;
        border: 1px solid #212b36;
    }
    .ex1 {
        -webkit-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
    }
    .ex2 {
        -webkit-hyphens: manual;
        -ms-hyphens: manual;
        hyphens: manual;
    }
    .ex3 {
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
</style>
</head>
<body>

<div class="ex1">Lorem ipsumdolor-sit amet, consectetur adipiscing elit.</div>
<div class="ex2">Lorem ipsumdolor-sit amet, consectetur adipiscing elit.</div>
<div class="ex3">Lorem ipsumdolor-sit amet, consectetur adipiscing elit.</div>

</body>
</html>

Preview

Property Values

Value	Description
none	No words are hyphenated.
manual	Default. Only words with &hyphen; or are hyphenated (if needed).
auto	Where the algorithm decides, words are hyphenated (if needed).
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
hyphens	55.0	43.0	5.1 -webkit-	79.0 10.0 -ms-	44.0

height

image-rendering

CSS hyphens Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us