Horje
Explain the use of the word-wrap Property in CSS

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.



Reffered: https://www.geeksforgeeks.org


CSS

Related
What is the purpose of using the CSS box-decoration-break Property ? What is the purpose of using the CSS box-decoration-break Property ?
Explain the Box Model Components in CSS Explain the Box Model Components in CSS
How to Align One Item to the Right using CSS Flexbox ? How to Align One Item to the Right using CSS Flexbox ?
How to make div Collapse Over Each Other ? How to make div Collapse Over Each Other ?
How to add Rounded Corners on Video in HTML ? How to add Rounded Corners on Video in HTML ?

Type:
Geek
Category:
Coding
Sub Category:
Tutorial
Uploaded by:
Admin
Views:
10