Display table word wrap

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>

asked Aug 11, 2009 at 4:01

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">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

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

or

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

answered Oct 8, 2009 at 17:01

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.

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

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>

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

answered Nov 23, 2017 at 11:39

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

answered Feb 3, 2011 at 9:57

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>

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

answered Aug 15, 2011 at 20:23

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>

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.

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>

answered Jan 11, 2013 at 7:15

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

BalajiBalaji

8,9335 gold badges43 silver badges46 bronze badges

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.

answered Jan 21, 2022 at 13:40

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>

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

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

answered Dec 11, 2015 at 13:43

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;

answered Sep 7, 2020 at 5:25

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

    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>

answered Feb 3, 2012 at 15:35

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>

answered Jul 31, 2020 at 14:01

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

td {
   display: table-cell;
}

answered Aug 11, 2009 at 4:10

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.

answered Oct 10, 2011 at 12:53

Adarsh SinghAdarsh Singh

1981 gold badge2 silver badges17 bronze badges

patrickpatrick

15.9k29 gold badges99 silver badges162 bronze badges

Riyaz HameedRiyaz Hameed

1,07912 silver badges10 bronze badges

.container {

  width: 30%;
  padding: 5px;
  background: #888;
  border: 1px dotted red;
  }

.table {
  display: table;
  table-layout: fixed;
  width: auto;
  word-wrap: break-word;
  }

<div class="container">
  <div class="table">
  <a href="#">unbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabel</a>
</div>
  
  </div>

user31782user31782

7,13112 gold badges66 silver badges141 bronze badges

CallumCallum

84512 silver badges22 bronze badges

Try with giving the .table element width and the anchor element word-wrap: break-word;

.container {
  width: 500px;
  padding: 5px;
  background: #888;
  border: 1px dotted red;
}
.table {
  display: table;
  table-layout: fixed;
  width: 100%
}
a {
  word-wrap: break-word;
}

<div class="container">
  <div class="table">
    <a href="#">unbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabel</a>
  </div>

</div>

answered Jan 16, 2017 at 16:54