CSS hyphens
CSS Hyphens
CSS Hyphens
The CSS hyphen property controls how words are split across multiple lines when text is too long to fit on a single line. This property can be used to improve readability of text that wraps across multiple lines.
This property only applies to block-level elements.
Here are all the possible values for the hyphen attribute:
- none − Disallows hyphenation.
-
manual − In WebKit browsers, specifies manual hyphenation behavior for text.
-
auto − Allows hyphenation based on the browser’s determination of an appropriate hyphenation point.
-
initial − The default value, manual.
-
inherit − Inherits the value from the parent element.
CSS Hyphens – none
hyphens: none The property value disallows hyphenation of words. Even if a word is too long to fit on one line, it will not be split across multiple lines.
Example
The following is an example −
<html lang="en">
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
}
.hyphenated-none {
hyphens: none;
}
</style>
</head>
<body>
<div class="container">
<p class="hyphenated-none">It is a long established Contrary to popularised.</p>
</div>
</body>
</html>
CSS Hyphens-manual
When using the CSS hyphens: manual attribute, hyphens are allowed only where the user explicitly inserts them. This is the default value.
Example
Here is an example −
<html lang="en">
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
}
.hyphenated-manual {
hyphens: manual;
}
</style>
</head>
<body>
<div class="container">
<p class="hyphenated-manual">It is a long-establ-ished contrast to popula-rised.</p>
</div>
</body>
</html>
CSS Hyphens – auto
You can use the CSS property hyphens:auto to have the browser automatically hyphenate words at the appropriate places according to the language’s hyphenation rules.
Example
Here is an example –
<html lang="en">
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
}
.hyphenated-auto {
hyphens: auto;
}
</style>
</head>
<body>
<div class="container">
<p class="hyphenated-auto">It is a long established contrast to popularized.</p>
</div>
</body>
</html>
CSS Hyphen – Initial
Example
This is an example –
<html lang="en">
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
}
.hyphenated-initial {
hyphens: initial;
}
</style>
</head>
<body>
<div class="container">
<p class="hyphenated-initial">It is a long establ-ished Contrary to popu-larised.</p>
</div >
</body>
</html>
CSS Hyphens – inherit
When you use the hyphens: inherit property, the value of the hyphen property is inherited from the parent element. The hyphenation of the element will be the same as that of its parent.
Example
This is an example:
<html lang="en">
<head>
<style>
.container {
border: 2px solid #12782f;
background-color: #2fe262;
width: 60px;
padding: 2px;
hyphens: auto;
}
.hyphenated-inherit {
border: 2px solid #ac3f08;
background-color: #f05e40;
hyphens: inherit;
}
</style>
</head>
<body>
<div class="container">
There are many variations of embarrassing of Lorem Ipsum.
<p class="hyphenated-inherit">It is a long establ-ished Contrary to popu-larised.</p>
</div>
</body>
</html>