Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Specify Word Breaking Rules using CSS3
To specify word breaking rules in CSS3, use the word-break property. This property is used to break the line. Let us see the syntax −
word-break: value;
The values include
normal − The default line break rules.
break-all − The word is broken at any character only if overflow occurs
break-word − The word is broken at arbitrary-points to prevent overflow
The following are the codes for specifying word breaking rules using CSS3 −
Normal Word Breaking Rule
The normal word breaking rule is the default rule −
word-break: normal;
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { width: 50px; border: 3px solid #3008c0; margin: 10px; padding: 10px; font-size: 18px; display: inline-block; margin-right: 20px; word-break: normal; } </style> </head> <body> <h1>The normal Word Breaking Rules Example</h1> <br /> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. </div> </body> </html> The break-all Word Breaking Rule
With the break-all value of the word-break property, the word is broken at any character only if overflow occurs −
word-break: break-all;
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { width: 50px; border: 3px solid #3008c0; margin: 10px; padding: 10px; font-size: 18px; display: inline-block; margin-right: 20px; word-break: break-all; } </style> </head> <body> <h1>The break-all Word Breaking Rules Example</h1> <br /> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. </div> </body> </html> The break-word Word Breaking Rule
With the break-word value of the word-break property, the word is broken at arbitrary-points to prevent overflow −
word-break: break-word;
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { width: 50px; border: 3px solid #3008c0; margin: 10px; padding: 10px; font-size: 18px; display: inline-block; margin-right: 20px; word-break: break-word; } </style> </head> <body> <h1>The break-word Word Breaking Rules Example</h1> <br /> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. </div> </body> </html> 
203 Views
