Home  »  Code Snippets   »   css wordwrap

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>

Similar Tags:

+ more tags