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
<!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 −