css word break

How to break word using CSS

CSS offers a property to break the word that is word-break. This can split the word depending on the available width. Split text will go in the next line. Two of the important values are break-all and break-word are shown in the example below.

Html content with large words

Lets understand both of the properties with example we’ll use an example width fixed width to understand.
the html code is as shown below.

<div style="width:80px; border:3px solid red" class="breakword">
Old MacDonald had a farm. E-I-E-I-O. And on that farm he had a sheep. E-I-E-I-O. With a baaa baaa here. And a baaa baaa there. 
</div>

With word-break:break-all the text will be sliced from anywhere where max-width is reached. It can split words in half.

.breakword{
word-break:break-all;
}

Edit Example

with word-break:break-word, it will not split the words this will work most of the time but for words larger than will width will still overflow creating a scrolling in the X-direction.

.breakword{
word-break:break-word;
}

Edit Example

This will fix most of the problems with readability but super long words will still get in the next line and stop making sense as shown below.

Edit Example

There is a webkit property that can clamp words and will show ... after a few lines. This is an alternate solution to breaking words.

.breakword{
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 5;
display: -webkit-box;
-webkit-box-orient: vertical;
}

Edit Example