CSS hyphens
CSS is all about presentation. Discover how CSS hyphens works to transform plain HTML into a premium user experience in the guide below.
This CSS attribute is utilized to manage the hyphenation of the content within block-level components. It specifies the behavior for breaking up long words when they extend beyond a single line or wrap onto subsequent lines.
This feature enables us to divide the word into two lines in order to enhance the visual presentation of the text.
Syntax
hyphens: none | manual | auto | initial | inherit;
The definitions of this CSS attribute are outlined in the following manner.
Property Values
This setting does not apply hyphenation to words, regardless of line breaks or word length.
It serves as the automatic setting that hyphenates a word based on its character composition, indicating hyphenation points. Below are the two Unicode characters that allow manual designation of potential line breaks within text content.
U+2010 (HYPHEN) - This character is known as the 'hard' hyphen and indicates a visible break in the line. It will be displayed as a hyphen, regardless of whether the line actually breaks at that point.
U+00AD, known as SHY, functions as an unseen 'soft' hyphen, indicating where a word can break when necessary without being visibly displayed. In HTML, the equivalent of a soft hyphen is represented by the ­ entity.
In this setting, the algorithm determines the placement of hyphens within words.
It establishes the attribute to its standard value.
inherit: It acquires the value from its parent element.
Let's explore this CSS attribute through an illustration.
Example
<!DOCTYPE html>
<html>
<head>
<title>
CSS hyphens Property
</title>
<style>
div {
width: 50px;
border: 3px solid blue;
background-color: lightblue;
}
.none{
hyphens: none;
}
.manual{
hyphens: manual;
}
.auto{
hyphens: auto;
}
</style>
</head>
<body>
<h2> Example of the hyphens property </h2>
<h3> hyphens: none; </h3>
<div class="none">
It is very�very looooo�ooooo�oong word.
</div>
<h3>hyphens: manual</h3>
<div class="manual">
It is very�very looooo�ooooo�ooong word.
</div>
<h3>hyphens: auto</h3>
<div class="auto">
It is very-very looooo-ooooo-oong word.
</div>
</body>
</html>
Output
