Explain the use of the word-wrap Property in CSS
Last Updated :
31 Jan, 2024
The word-wrap
property in CSS is used to control how long words should behave when they exceed the width of their container. It is especially useful for preventing long words or strings of text from breaking the layout by overflowing their container.
Syntax:
The word-wrap
property can take two values:
normal
: The default value, where long words may overflow the container.
break-word
: Forces long words to break and wrap onto the next line.
/* Example of using word-wrap
to break long words */
.container {
word-wrap: break-word;
}
Features:
- Preventing Overflow:
word-wrap: break-word;
is commonly used to prevent long words from overflowing their container and disrupting the layout.
- Compatibility: In modern CSS,
overflow-wrap
is preferred over word-wrap
. They have the same effect, and using overflow-wrap: break-word;
is recommended for better compatibility.
Share your thoughts in the comments
Please Login to comment...