CSS word-wrap

The word-wrap property in CSS is used to specify whether or not the browser can break lines of text at any point to prevent text from overflowing its containing element.

By default, long words or strings of text that are too long to fit within the container will overflow the container and extend beyond its boundaries. By using the word-wrap property, you can force the text to wrap within the container.

The word-wrap property accepts the following values:

• normal: Default value. Lines can break only at normal white space.
• break-word: Allows long words to be broken and wrap onto the next line.

Let's see an example to understand how the word-wrap property works:

In this example, the text Loremipsumdolorsitametconsecteturadipiscingelit is too long to fit within the container with a width of 200px. Without the word-wrap property, the text would overflow the container. However, by using word-wrap: break-word;, the text is broken and wrapped onto the next line to prevent overflow.