Word-wrap in an HTML table

html css html-table

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.

add hard-hyphen. This is a pre-sentation.

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.

I apologize for using word 'hard-hyphen'. In HTML, the plain hyphen is represented by the "-" character (- or -). The soft hyphen is represented by the character entity reference ( or )

Are you really using break-work? Maybe that could have something to do with it.

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

Ruslan López

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

td { border: 1px solid; }

LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord

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

@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!

This makes the other columns much too wide.

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.

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

Pratik Stephen

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

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

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

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

this don't support by firefox, opera

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

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

Peter Mortensen

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.

This is what was inherited and broke the word wrapping for me

@RickGrundy What do you change it to if you have that issue?

@cokedude I'm way too late here, but it's white-space:normal;

Nick Parsons

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

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

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

Mark Amery

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>

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

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

Slava

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

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

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

Piotr Findeisen

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

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.

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.

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. é 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.

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

Mark Amery

Change your code

word-wrap: break-word;

word-break:break-all;

Example

longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content

Short Content

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

Rishab

Check out this demo

LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord

Foo

Here is the link to read

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

Mark Amery

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>

Mark Amery

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>

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

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

Mark Amery

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

loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word

Foo

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

Indrek

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>

Cody Guldner

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

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

ßãlãjî

i tried all but in my case just work for me

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

Peter Mortensen

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>

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.

Fusion

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

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

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

Rishab

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

test1: Fusce ultricies mi nec orci tempor sit amet
test2: Fusce ultricies
longest: 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.

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.

Darkcoder

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>

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

eyal_katz

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;

TFR3

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.

McNiel Viray

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

ironsam

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

td {
   display: table-cell;
}

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

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

Mark Amery

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.

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

Peter Mortensen

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

Adarsh Singh

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>

Lawrence Njenga

Just add width. This worked for me.

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

patrick

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>

Word-wrap in an HTML table

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US