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.