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;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

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.

Bostic

add hard-hyphen. <tr> <td style="text-wrap:normal;word-wrap:break-word"> This is a pre-sentation. </td> </tr> – Embassy

Unfortunately, the text in there comes from user-generated content. Of course, I could pre-process it and add the hyphen, but I was hoping there would be a better way. – Bostic

I apologize for using word 'hard-hyphen'. In HTML, the plain hyphen is represented by the "-" character (&#45; or &#x2D;). The soft hyphen is represented by the character entity reference &shy; (&#173; or &#xAD;) – Embassy

Are you really using <code>break-wor<em>k</em></code>? Maybe that could have something to do with it. – Elmore

If you're here you might want to also look at white-space: pre-wrap developer.mozilla.org/en-US/docs/Web/CSS/white-space – Syndactyl

Consider adding the <wbr> tag. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr – Echidna

word-wrap: break-word !important is not working; – Hispanicize

It's word-break, not word-wrap. – Hued

Answer 1

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

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
    </td>
    <td>Short word</td>
  </tr>
</table>

Sumbawa

@ewomac yeah, sometimes I just have to ignore the VS2010 errors about HTML/CSS if I know it will work in the browser. – Sumbawa

I NEVER view the page in VS and manually code the markup. If it is too complicated the page probably needs work and VS just injects too much and in ways I don't want keeping my page tight and clean. – Coquetry

@marc!! dude, thanks so much for this. I was tasked with building a mobile version of a client site that uses tables, and i was having trouble getting this to work! table-layout:fixed did the trick! – Christie

This makes the other columns much too wide. – Intwine

@ewomack - impressivewebs.com/word-wrap-css3 / msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx#font claims that the word-wrap CSS existed since IE5 days, so perhaps it is just VS2010. – Semitrailer

Be sure to read developer.mozilla.org/en-US/docs/Web/CSS/table-layout Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths. Sounds like this is good for performance also. – Hankypanky

@Clément see Indrek's answer below about <colgroup>, it fixed this for me. – Taffeta

<ul style="word-wrap: break-word !important"> is not working. – Hispanicize

Adding table-layout:fixed; along with the other config given is what resolved this for me. I am taking the time to comment here because I ignored each answer's mention of table-layout:fixed;, and all that ignoring table-layout:fixed; did was to delay the resolution of the problem leading to frustration. But when I eventually added table-layout:fixed; in addition to the other config mentioned in some of the answers, then the table finally wrapped for shrinking screens immediately. – Mauchi

The problem is that we do not always want to break word. – Mord

Answer 2

<td style="word-break:break-all;">longtextwithoutspace</td>

or

<span style="word-break:break-all;">longtextwithoutspace</span>

Cingulum

Can confirm that Pratik's approach works on Safari on iOS (iPhone) too. – Semang

To work around the problem with some short and some long words, you could potentially preprocess the text and wrap only long words (say, > 40 chars) in the <span>. – Nonattendance

this don't support by firefox, opera – Copolymer

this didn't preferentially break on non-word characters (like, if I had a series of shorter words separated by spaces it would always run the words right up to the line, then break the last word in half). Word-wrap will break words only when necessary – Unscratched

This approach is better because doesn't require table-layout: fixed;. – Script

Excellent solution when you use display: grid, thank you very much. – Crittenden

Answer 3

You can 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 and thus break the word wrapping. (Comments by shane lee and Beer Me.) To fix that issue, you can add white-space:normal; to the style.

Deodand

Answer 4

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 <table>

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%;
}

Bostic

Oddy for me, when I removed the comment // this works for all but td, it works. – Contralto

Note, this fundamentally changes how tables are laid out, eliminating the automatic column sizing that usually happens. Look uptable-layout for more. – Laryngoscope

Answer 5

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.

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

Ho

You can add min-width: 100% along with width to ensure the div takes up the entire cell. – Khorma

I want to do word wrap with comma (,). Like Long,Long,Long,Long,Long. I want to wrap this by after any comma (,). – Swell

Answer 6

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

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

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

Stopper

While this hack does in fact seem to work in all browsers, beware that the CSS spec provides no guarantee of this. Per w3.org/TR/CSS21/visudet.html#propdef-max-width, "the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined". – Cylix

You don't even need a separate div, but thanks a lot for this! – Winifred

Answer 7

Problem with

<td style="word-break:break-all;">longtextwithoutspace</td>

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

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

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;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

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.

Naissant

Perhaps the output from this is slightly better if, in sufficiently long words, you insert a soft hyphen after every character, so that the browser can reliably break the word at the right-hand edge of the containing element. – Cylix

While this is a viable solution, the seemingly innocuous suggestion to add something "after every, say, 20th character" is fraught with traps if you want to do it programmatically on your server. Iterating over the characters of a Unicode string is difficult in most programming languages. At best, a language may make it easy to iterate over Unicode code points, but those aren't necessarily what we'd want to refer to as "characters" (e.g. é may be written as two code points). We probably really mean "graphemes", but I don't know any language that makes it trivial to loop over those. – Cylix

@MarkAmery you're right. However, even with plain ASCII this isn't great. I added "warnings". – Naissant

Answer 8

Change your code

word-wrap: break-word;

to

word-break:break-all;

Example

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

Scotism

-1; this makes the browser completely ignore word breaks and break in the middle of words even if it doesn't need to. That's rarely desirable behaviour and presumably not the behaviour that the OP wanted, or else they wouldn't've been using break-word in the first place. – Cylix

Answer 9

Check out this demo

   <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

Here is the link to read

Eject

-1; using break-all will cause the browser to completely ignore word breaks when deciding where to put line breaks, with the effect that even if your cell contains normal prose without any very long words, you'll end up with line breaks in the middle of words. This is typically undesirable. – Cylix

Answer 10

Tested in IE 8 and Chrome 13.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

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.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Abram

Answer 11

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>

Impalpable

This basically just repeats what loungerdork's answer already said months earlier without adding any new information or insight. – Cylix

Answer 12

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.

Susysuter

Answer 13

It appears you need to set word-wrap:break-word; on a block element (div), with specified (non relative) width. Ex:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

or using word-break:break-all per Abhishek Simon's suggestion.

Helve

Answer 14

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

Leija

-1 for both the lack of any explanation and the bad solution. Putting the content inside a fixed-pixel-width p within a table cell that doesn't have a fixed pixel width will almost certainly end up with the p either overflowing or failing to fill the table cell. – Cylix

Answer 15

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:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

Britnibrito

Answer 16

i tried all but in my case just work for me

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

Turcotte

Answer 17

This works for me:

<style type="text/css">
    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%
   }

</style>

Escalade

Like several other answers, the key bit here that makes it work is using table-layout: fixed, but there's already a much older answer suggesting that, so this answer doesn't add any new information. – Cylix

Answer 18

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;

Carson

I consider this answer as the best answer to the question. No workaround, no hack. Thanks from a backend guy who struggled with this :o) – Ionone

Answer 19

this might help,

css

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

<table>
    <thead>
    <tr>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
        <td>Col 4</td>
        <td>Col 5</td>
        <td>Col 6</td>
        <td>Col 7</td>
    </tr>
    </thead>
    <tbody>
    <tr>            <td class="wrap-me">tesetonlywithoutspacetesetonlywithoutspacetesetonlywithoutspace</td>
        <td class="wrap-me">test only</td>
        <td class="wrap-me">test with space long text</td>
        <td class="wrap-me">Col 4</td>
        <td class="wrap-me">Col 5</td>
        <td class="wrap-me">Col 6</td>
        <td class="wrap-me">Col 7</td>
    </tr>
    <tr>            
        <td class="wrap-me">test only</td>
        <td class="wrap-me">test only</td>
        <td class="wrap-me">test with space long text</td>
        <td class="wrap-me">testwithoutspacetestonlylongtext</td>
        <td class="wrap-me">Col 5</td>
        <td class="wrap-me">Col 6</td>
        <td class="wrap-me">Col 7</td>
    </tr>
    </tbody>
</table>

Etsukoetta

Answer 20

If you do not need a table border, apply this:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

Starryeyed

There's already a much older answer suggesting to use table-layout: fixed; this one doesn't add anything new to the page. – Cylix

Answer 21

I found a solution that seems to work in Firefox, Google Chrome and Internet 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.

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

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 Explorer 9, (and Firefox and Google Chrome of course) mainly trying to fix the broken Internet Explorer browser here.

Vange

Answer 22

i have same issue this work fine for me

 <style> 
      td{
            word-break: break-word;
      }
    </style>
    <table style="width: 100%;">
      <tr>
<td>Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</td>
        <td><span style="display: inline;">Short word</span></td>
      </tr>
    </table>

Highbred

it works without changing table style.... on Chrome today. – Gurkha

Answer 23

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

td {
   display: table-cell;
}

Mencius

-1; text in any HTML element wraps by default, not just tables. The suggestion here doesn't really make any sense. – Cylix

This is just not an answer and should be far below the answer that appends it. – Track

Answer 24

style="table-layout:fixed; width:98%; word-wrap:break-word"

<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" >

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.

Leper

This is basically a duplicate as the top-voted answer; in both cases the solution boils down to "use table-layout: fixed". – Cylix

Answer 25

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

Somerville

Answer 26

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.

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Crunch

Answer 27

Just add width. This worked for me.

     <td style="width:10%;"><strong>Item Name</strong></td>

Yard

Answer 28

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

<table>
<tr>
  <td>
    Title
  </td>
  <td>
    Length
  </td>
  <td>
    Action
  </td>
  </tr>

  <tr>
  <td>
    Long song name
  </td>
  <td>
    3:11
  </td>
  <td>
    <button>
    Buy Now!
    </button>
  </td>
  
</tr>

<tr>
  <td  colspan=3>
    <div style='width:200px;background-color:lime;margin-left:20px'>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>quick </div>
      <div style='float:left;white-space:pre'>brown </div>
      <div style='float:left;white-space:pre'>foxed </div>
      <div style='float:left;white-space:pre'>jumped </div>
      <div style='float:left;white-space:pre'>over </div>
      <div style='float:left;white-space:pre'>the </div>

      <div style='float:left;white-space:pre'>lazy </div>
      <div style='float:left;white-space:pre'>brown </div>
      <div style='float:left;white-space:pre'>cat </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>

      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
      <div style='float:left;white-space:pre'>the </div>
    
    </div>
    
  </td>
</tr>


  <tr>
  <td>
    Long song name1
  </td>
  <td>
    2:20
  </td>
  <td>
    <button>
    Buy Now!
    </button>
  </td>
  
</tr>


</table>

Significant