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>

CSS doesn’t make text go on a new line?

If you have a fixed-width div that contains text that is longer than the div, Adding a long string of letters will not wrap since their part of the single letter word. There is more than one solution to this problem So let’s check it out.

Use Cases:

This does not happen often and can be seen in large spellings or text URLs. Here is a case that demonstrates the problem.

<div class="box">
Pneumonoultramicroscopicsilicovolcanoconiosis	
Supercalifragilisticexpialidocious	
Pseudopseudohypoparathyroidism	
https://en.wikipedia.org/wiki/Longest_word_in_English
</div>

Css to style the box:

.box{
width:300px; 
border:2px solid red; 
margin:10px;
}

The output:

Edit Example

Problem: Overflowing text.

Solutions:

With white-space:

.box{
white-space: initial;
}

Edit Example

With overflow-wrap:

.box{
overflow-wrap: break-word;
}

Edit Example

With word-break:

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

Edit Example

With hyphens:

.code{
hyphens: auto;
}

Edit Example