word-break property
This property is used to specify how words should break when reaching the end of a line. Using this property, the lines that don’t fit in the content box will break at a certain point.
Syntax:
word-break: normal | break-all | keep-all | initial | inherit
Property Values:
- normal Words break according to their usual rules.
- break-all Lines may break between any two letters.
- keep-all Breaks are prohibited between pairs of letters.
- initial Sets this property to its default value.
- inherit The property from its parent element.
Example:
<!DOCTYPE html> <html> <head> <style> p{ width: 350px; border: 2px solid #663300; text-align: left; font-size: 20px; color: #ff99ff; } .break{ word-break: break-all; } .keep{ word-break: keep-all; } </style> </head> <center> <body> <h2>word-break: break-all;</h2> <p class="break"> Hi, Welcome to I2Tutorials. Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here. </p> <h2>word-break: keep-all;</h2> <p class="keep"> Hi, Welcome to I2Tutorials. Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here. </p> </center> </body> </html>
OUTPUT: