Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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>
110 Views
