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:

td {
  border: 1px solid;
}


  
    
      
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      
    
    Short word

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_119901 · Answer

The following works for me in Internet Explorer. Note the addition of the table-layout:fixed CSS attribute

td {
  border: 1px solid;
}


  
    
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord

user_141196 · 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_106095 · 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

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_1709903 · Answer

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

user_65458 · Answer

Problem with

longtextwithoutspace

is that it will work not so good when text has some spaces, e.g.

long text with andthenlongerwithoutspaces

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):

td {
  border: 1px solid;
}


  
    
      
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      
    
    Short word

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_11624647 · Answer

i tried all but in my case just work for me

white-space: pre-wrap;
word-wrap: break-word;

user_9351979 · Answer

I ran into a similar problem. I had a table inside a Bootstrap modal in an AngularJS application. When I changed the filter on the table and long values appeared in the cell in question, the text would overflow outside the cell, and outside the modal. This CSS ended up fixing the problem, applied to the TD:

style="white-space:pre-wrap; word-break:break-word"

That made the values wrap properly even across changes to the table content.

style="white-space:pre-wrap; word-break:break-word"

That made the values wrap properly even across changes to the table content.

user_3361533 · 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_7439186 · Answer

i have same issue this work fine for me

 
    
      
Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
        Short word

user_5963057 · Answer

this might help,

css

.wrap-me{
  word-break: break-all !important;
}


    
    
        Col 1
        Col 2
        Col 3
        Col 4
        Col 5
        Col 6
        Col 7
    
    
    
                tesetonlywithoutspacetesetonlywithoutspacetesetonlywithoutspace
        test only
        test with space long text
        Col 4
        Col 5
        Col 6
        Col 7
    
                
        test only
        test only
        test with space long text
        testwithoutspacetestonlylongtext
        Col 5
        Col 6
        Col 7

user_3539 · Answer

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

td {
   display: table-cell;
}

user_9573092 · 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.


  
    
              Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      
    
    Short word

user_10452979 · Answer

Just add width. This worked for me.

     Item Name

patrick_73804 · Answer

If you only care about text, you can do it without table-layout:fixed



  
    Title
  
  
    Length
  
  
    Action
  
  

  
  
    Long song name
  
  
    3:11
  
  
    
  
  



  
    
      the 
      quick 
      brown 
      foxed 
      jumped 
      over 
      the 

      lazy 
      brown 
      cat 
      the 
      the 
      the 
      the 

      the 
      the 
      the 
      the 
      the 
      the 
      the 
    
    
    
  



  
  
    Long song name1
  
  
    2:20

Word-wrap in an HTML table

28 Answers

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

css