CSS’s word-wrap property can be used to break a really long word so that it continues on the next line rather than having the word extend beyond its potential boundaries so that it all stays on one line.
Let’s say you had a really long word that was taking up way too much space, like in the image below:
If you wanted the word to stay within its boundaries (the container that the paragraph is in is only supposed to be 250px wide), you can use the word-wrap property to tell the code that it’s okay to break up the word to keep it contained to the confines of its parent div. Here’s what your CSS would need to look like:
p{
word-wrap: break-word;
}
Now your text should look like this:
You’ll see that the word is now cut off almost in the middle. This isn’t the default in CSS because it doesn’t always look great, but there are definitely times when you’ll need to use word-wrap property to make sure the text doesn’t overflow and maintain the integrity of your divs.