Word-wrap in an HTML table

Question

I\'ve been using word-wrap: break-word to wrap text in divs and spans. However, it doesn\'t seem to work in table cells. I have a tabl

Answer 1

Workaround that uses overflow-wrap and works fine with normal table layout + table width 100%

https://jsfiddle.net/krf0v6pw/

HTML

  

    

      

        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      
    
  

CSS

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

Benefits:

• Uses overflow-wrap:break-word instead of word-break:break-all. Which is better because it tries to break on spaces first, and cuts the word off only if the word is bigger than it's container.
• No table-layout:fixed needed. Use your regular auto-sizing.
• Not needed to define fixed width or fixed max-width in pixels. Define % of the parent if needed.

Tested in FF57, Chrome62, IE11, Safari11