Specify Word Breaking Rules using CSS3

https://www.tutorialspoint.com/specify-word-breaking-rules-using-css3

13-09-2020
|

Question

Specify Word Breaking Rules using CSS3

CSS Web Development Front End Technology

To specify word breaking rules in CSS3, use the word-break property. This property is used to break the line. Possible values include normal, break-all, keep-all, break-word, etc.

Following is the code for specifying word breaking rules using CSS3 −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
span {
   display: inline-block;
   font-weight: bold;
   font-size: 20px;
   margin-right: 20px;
}
div {
   width: 50px;
   border: 3px solid #3008c0;
   margin: 10px;
   padding: 10px;
   font-size: 18px;
   display: inline-block;
   margin-right: 20px;
}
.normal {
   word-break: normal;
}
.break-all {
   word-break: break-all;
}
.break-word {
   word-break: break-word;
}
</style>
</head>
<body>
<h1>Word Breaking Rules Example</h1>
<span>NORMAL </span> <span>BREAK ALL</span> <span>BREAK WORD</span>
<br />
<div class="normal">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="break-all">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="break-word">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</body>
</html>

Output

The above code will produce the following output −

AmitDiwan

Published on 12-May-2020 12:52:15

Previous Page Print Page