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 table set to width 100   with one row and two columns  Text in columns  although styled with the above word-wrap  doesn t wrap  It causes the text to go past the bounds of the cell  This happens on Firefox  Google Chrome and Internet Explorer   Here s what the source looks like    x000D   x000D  td   x000D    border  1px solid  x000D    x000D   lt table style  width  100    gt  x000D     lt tr gt  x000D       lt td gt  x000D         lt div style  word-wrap  break-word   gt  x000D          Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word x000D         lt  div gt  x000D       lt  td gt  x000D       lt td gt  lt span style  display  inline   gt Short word lt  span gt  lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    The long word above is larger than the bounds of my page  but it doesn t break with the above HTML  I ve tried the suggestions below of adding text-wrap suppress and text-wrap normal  but neither helped

User · Answer

The only thing that needs to be done is add width to the <td> or the <div> inside the <td> depending on the layout you want to achieve.

eg:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

or

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

User · Answer

This works for me    lt style type  text css  gt      td               CSS 3            white-space  -o-pre-wrap          word-wrap  break-word          white-space  pre-wrap          white-space  -moz-pre-wrap          white-space  -pre-wrap          And table attribute is      table         table-layout  fixed        width  100         lt  style gt

User · Answer

lt p style  overflow hidden  width 200px  word-wrap break-word   gt longtexthere lt p gt

User · Answer

Change your code  word-wrap  break-word    to  word-break break-all    Example   x000D   x000D   lt table style  width  100    gt  x000D     lt tr gt  x000D       lt td gt  x000D         lt div style  word-break break-all   gt longtextwithoutspacelongtextwithoutspace Long Content  Long Content  Long Content  Long Content  Long Content  Long Content  Long Content  Long Content  Long Content  Long Content lt  div gt  x000D       lt  td gt  x000D       lt td gt  lt span style  display  inline   gt Short Content lt  span gt  x000D       lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Just add width  This worked for me        lt td style  quot width 10   quot  gt  lt strong gt Item Name lt  strong gt  lt  td gt

User · Answer

Turns out there s no good way of doing this  The closest I came is adding  overflow hidden   to the div around the table and losing the text  The real solution seems to be to ditch table though  Using divs and relative positioning I was able to achieve the same effect  minus the legacy of  lt table gt   2015 UPDATE  This is for those like me who want this answer  After 6 years  this works  thanks to all the contributors          this works for all but td   word-wrap break-word     table      this somehow makes it work for td   table-layout fixed    width 100

User · Answer

The following works for me in Internet nbsp Explorer  Note the addition of the table-layout fixed CSS attribute   x000D   x000D  td   x000D    border  1px solid  x000D    x000D   lt table style  table-layout  fixed  width  100   gt  x000D     lt tr gt  x000D       lt td style  word-wrap  break-word  gt  x000D        LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord x000D       lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Common confusing issue here is that we have 2 different css properties  word-wrap and word-break  Then on top of that  word-wrap has an option called break-word   Easy to mix-up  -  Usually this worked for me  even inside a table  word-break  break-word

User · Answer

Problem with   lt td style  word-break break-all   gt longtextwithoutspace lt  td gt    is that it will work not so good when text has some spaces  e g    lt td style  word-break break-all   gt long text with andthenlongerwithoutspaces lt  td gt    If word andthenlongerwithoutspaces fits into table cell in one line but long text with andthenlongerwithoutspaces does not  the long word will be broken in two  instead of being wrapped   Alternative solution  insert U 200B  ZWSP   U 00AD  soft hyphen   or U 200C  ZWNJ  in every long word after every  say  20th character  however  see warning below     x000D   x000D  td   x000D    border  1px solid  x000D    x000D   lt table style  width  100    gt  x000D     lt tr gt  x000D       lt td gt  x000D         lt div style  word-wrap  break-word   gt  x000D          Looooooooooooooooooo amp  xAD oooooooooooooooooooo amp  xAD oooooooooooooooooooo amp  xAD oooooooooooooooooooo amp  xAD oooooooooooooooooooo amp  xAD oooooooooooooooooooo amp  xAD oooooooooooooooooooo amp  xAD oooooooooooooooooooo amp  xAD oooooooooooooooooooo amp  xAD oooooooooooooong word x000D         lt  div gt  x000D       lt  td gt  x000D       lt td gt  lt span style  display  inline   gt Short word lt  span gt  lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Warning  inserting additional  zero-length characters does not affect reading  However  it does affect text copied into clipboard  these characters are of course copied as well   If the clipboard text is later used in some search function in the web app    search is going to be broken  Although this solution can be seen in some well known web applications  avoid if possible   Warning  when inserting additional characters  you should not separate multiple code points within grapheme  See https   unicode org reports tr29  Grapheme Cluster Boundaries for more info

User · Answer

I found a solution that seems to work in Firefox  Google Chrome and Internet nbsp Explorer 7-9  For doing a two-column table layout with long text on the one side  I searched all over for similar problem  and what worked in one browser broke the other  or adding more tags to a table just seems like bad coding   I did NOT use a table for this  DL DT DD to the rescue  At least for fixing a two-column layout  that is basically a glossary dictionary word-meaning setup   And some generic styling    x000D   x000D      dl   x000D          margin-bottom 50px  x000D        x000D   x000D      dl dt   x000D          background  ccc  x000D          color  fff  x000D          float left  x000D          font-weight bold  x000D          margin-right 10px  x000D          padding 5px  x000D          width 100px  x000D        x000D   x000D      dl dd   x000D          margin 2px 0  x000D          padding 5px 0  x000D          word-wrap break-word  x000D          margin-left 120px  x000D        x000D   lt dl gt  x000D       lt dt gt test1 lt  dt gt  x000D       lt dd gt Fusce ultricies mi nec orci tempor sit amet lt  dd gt  x000D       lt dt gt test2 lt  dt gt  x000D       lt dd gt Fusce ultricies lt  dd gt  x000D       lt dt gt longest lt  dt gt  x000D       lt dd gt  x000D          Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit Nulla x000D          laoreet ante et turpis vulputate condimentum  In in elit nisl  Fusce ultricies x000D          mi nec orci tempor sit amet luctus dui convallis  Fusce viverra rutrum ipsum  x000D          in sagittis eros elementum eget  Class aptent taciti sociosqu ad litora x000D          torquent per conubia nostra  per  x000D       lt  dd gt  x000D   lt  dl gt  x000D   x000D   x000D    Using floating word-wrap and margin left  I got exactly what I needed  Just thought I d share this with others  maybe it will help someone else with a two-column definition style layout  with trouble getting the words to wrap   I tried using word-wrap in the table cell  but it only worked in Internet nbsp Explorer 9   and Firefox and Google Chrome of course  mainly trying to fix the broken Internet nbsp Explorer browser here

User · Answer

The answer that won the bounty is correct  but it doesn t work if the first row of the table has a merged joined cell  all the cells get equal width    In this case you should use the colgroup and col tags to display it properly    lt table style  table-layout  fixed  width  200px  gt   lt colgroup gt       lt col style  width  30    gt       lt col style  width  70    gt   lt  colgroup gt   lt tr gt       lt td colspan  2  gt Merged cell lt  td gt   lt  tr gt   lt tr gt       lt td style  word-wrap  break-word  gt VeryLongWordInThisCell lt  td gt       lt td style  word-wrap  break-word  gt Cell 2 lt  td gt   lt  tr gt   lt  table gt

User · Answer

A solution which work with Google Chrome and Firefox  not tested with Internet nbsp Explorer  is to set display  table-cell as a block element

User · Answer

As mentioned  putting the text within div almost works  You just have to specify the width of the div  which is fortunate for layouts which are static   This works on FF 3 6  IE 8  Chrome    lt td gt     lt div style  width  442px  word-wrap  break-word  gt       lt  -- Long Content Here-- gt     lt  div gt   lt  td gt

User · Answer

i have same issue this work fine for me   lt style gt         td              word-break  break-word               lt  style gt       lt table style  quot width  100   quot  gt         lt tr gt   lt td gt Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word lt  td gt           lt td gt  lt span style  quot display  inline  quot  gt Short word lt  span gt  lt  td gt         lt  tr gt       lt  table gt

User · Answer

Workaround that uses overflow-wrap and works fine with normal table layout   table width 100   https   jsfiddle net krf0v6pw   HTML   lt table gt     lt tr gt       lt td class  overflow-wrap-hack  gt         lt div class  content  gt          wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww        lt  div gt       lt  td gt     lt  tr gt   lt  table gt    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

User · Answer

It appears you need to set word-wrap break-word  on a block element  div   with specified  non relative  width  Ex    x000D   x000D   lt table style  width  100    gt  lt tr gt  x000D       lt td gt  lt div style  display block  word-wrap  break-word  width  40em   gt loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word lt  div gt  lt  td gt  x000D       lt td gt  lt span style  display  inline   gt Foo lt  span gt  lt  td gt  x000D   lt  tr gt  lt  table gt  x000D   x000D   x000D    or using word-break break-all per Abhishek Simon s suggestion

User · Answer

Tables wrap by default  so make sure the display of the table cells are table-cell   td      display  table-cell

User · Answer

A long shot  but double-check with Firebug  or similar  that you aren t accidentally inheriting the following rule   white-space nowrap    This may override your specified line break behaviour

User · Answer

style  table-layout fixed  width 98   word-wrap break-word     lt table bgcolor  white  id  dis  style  table-layout fixed  width 98   word-wrap break-word  border  0  cellpadding  5  cellspacing  0  bordercolordark  white  bordercolorlight  white   gt    Demo - http   jsfiddle net Ne4BR 749   This worked great for me   I had long links that would cause the table to exceed 100  on web browsers  Tested on IE  Chrome  Android and Safari

User · Answer

i tried all but in my case just work for me white-space  pre-wrap  word-wrap  break-word

User · Answer

lt td style  word-break break-all   gt longtextwithoutspace lt  td gt    or    lt span style  word-break break-all   gt longtextwithoutspace lt  span gt

User · Answer

Tested in IE 8 and Chrome 13    lt table style  table-layout  fixed  width  100   gt       lt tr gt           lt td gt                 lt div style  word-wrap  break-word   gt                   longtexthere                lt  div gt           lt  td gt           lt td gt  lt span style  display  inline   gt Foo lt  span gt  lt  td gt       lt  tr gt   lt  table gt    This causes the table to fit the width of the page and each column to take up 50  of the width   If you prefer the first column to take up more of the page  add a width  80  to the td as in the following example  replacing 80  with the percentage of your choice    lt table style  table-layout  fixed  width  100   gt       lt tr gt           lt td style  width 80   gt                  lt div style  word-wrap  break-word   gt                   longtexthere                 lt  div gt               lt  td gt           lt td gt  lt span style  display  inline   gt Foo lt  span gt  lt  td gt       lt  tr gt   lt  table gt

User · Answer

You can try this if it suits you     Put a textarea inside your td and disable it with background color white and define its number of rows    lt table style  width  100    gt     lt tr gt       lt td gt           lt textarea rows  4  style  background-color white border  none   disabled gt       Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word        lt  textarea gt       lt  td gt       lt td gt  lt span style  display  inline   gt Short word lt  span gt  lt  td gt     lt  tr gt   lt  table gt

User · Answer

If you do not need a table border  apply this    table      table-layout fixed      border-collapse collapse    td      word-wrap  break-word

User · Answer

Check out this demo   x000D   x000D      lt table style  width  100    gt  x000D       lt tr gt  x000D           lt td gt  lt div style  word-break break-all   gt LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord lt  div gt  x000D           lt  td gt  x000D           lt td gt  x000D               lt span style  display  inline   gt Foo lt  span gt  x000D           lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Here is the link to read

[html] Word-wrap in an HTML table

Examples related to html

Examples related to css

Examples related to html-table