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

 

how do make a big word break into two html?

This problem focuses on solving the problem of wrapping words inside the table data. The table will wrap all the words automatically but sometimes the table will expand. To solve the problem we’ll use a combination of CSS properties to make it work in most of the browsers if not all.

Wrapping inside the Table Data

This is the problem:

Edit Example

Html:

<table border="1" width="200">
    <tr> <td>bbbbbbbbbbbbbbbbiiiiiiiiiiiinnnnnnnnnnngggggggggggoooooooooooobbbbbbbbbbbiiiiiiinnnnnnngggggggooooooobbbbbbbbbbbiiiiiiinnnnnnngggggggooooooo and bingo was his name
      </td>
    </tr>
  </table>

The solution :

.breakproof {
overflow-wrap: break-word;
word-wrap: break-word;

-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;

-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}

This will output the data as expected. However, wrapping words may break it and won't make much sense.

Edit Example

Here is what we did to the code

<table border="1" width="200">
    <tr>
      <td class="breakproof">bbbbbbbbbbbbbbbbiiiiiiiiiiiinnnnnnnnnnngggggggggggoooooooooooobbbbbbbbbbbiiiiiiinnnnnnngggggggooooooobbbbbbbbbbbiiiiiiinnnnnnngggggggooooooo and bingo was his name
      </td>
    </tr>
  </table>