CSS line break

For line break in css, the basic usage is as following:

.type-a
  text-wrap: normal
  word-wrap: break-word

But this does not work inside tables. If we want this to work in tables we must apply {table-layout: fixed } to the table. If we don’t want to use fixed table layout the only solution is:

.type-b
  word-break: break-all // for IE, FF
  word-break: break-word // for chrome

{word-break: break-all} is not really pretty in IE and Firefox but it still works.

So in the normal case we can use .type-a but use .type-b to the elements in table.

live demo:

See the Pen wynrC by Oliver - Frontend Developer (@Oliverl) on CodePen.

CSS line break even inside tables