Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
Adding Hyphens to Text with the CSS hyphens Property
Using the CSS hyphens property, we can specify how hyphens are added in text. The hyphens property values can be −
none − The words not hyphenated
manual − The words are hyphenated at ‐ or The default.
auto − The words are hyphenated where the deciding factor is the algorithm
The hyphen can be set like this −
It can also be set like this. Totally depends on the text form −
Let us see some examples −
Words are Hyphenated Manually
The following example illustrate CSS hyphens property where the word are hyphenated manually −
div:last-of-type {
hyphens: manual;
-webkit-hyphens: manual;
-ms-hyphens: manual;
}
Example
Let us see the example now −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 30%;
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>
Words are Hyphenated With Auto Value
Example
Let us see another example. In this example, we have set the hyphens to auto i.e. the words are hyphenated where the deciding factor is the algorithm −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10px;
padding: 10px;
width: 25%;
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>
Updated on: 2023-10-27T14:13:43+05:30
104 Views
Advertisements