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.

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. — psychotik, Aug 11 '09 at 06:36
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 ) — KV Prajapati, Aug 11 '09 at 06:58
Are you really using break-work? Maybe that could have something to do with it. — Ms2ger, Aug 11 '09 at 09:15
If you're here you might want to also look at `white-space: pre-wrap` https://developer.mozilla.org/en-US/docs/Web/CSS/white-space — Tom Prats, Aug 05 '14 at 15:43
Consider adding the `` tag. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr — Darth Egregious, Feb 15 '18 at 20:19

score 700 · Answer 1 · edited May 24 '23 at 10:17

700

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>

edited May 24 '23 at 10:17

Jonas Äppelgran

2,617
26
30

answered Dec 10 '09 at 20:15

Marc Stober

10,237
3
26
31

@ewomac yeah, sometimes I just have to ignore the VS2010 errors about HTML/CSS if I know it will work in the browser. – Marc Stober Aug 11 '11 at 16:19
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. – Mark Schultheiss Aug 15 '11 at 12:21
3

@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! – debug Sep 14 '11 at 21:47
30

This makes the other columns much too wide. – Clément Dec 13 '11 at 10:55
@ewomack - http://www.impressivewebs.com/word-wrap-css3 / http://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. – user66001 Mar 18 '13 at 03:22
4

Be sure to read https://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. – Sam Barnum Aug 09 '13 at 01:41
2

@Clément see Indrek's answer below about ``, it fixed this for me. – andrewtweber Dec 29 '14 at 21:46
`
– NIMISHAN Nov 05 '19 at 17:24
1

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. – CodeMed Dec 30 '22 at 03:18
The problem is that we do not always want to break word. – Albert Cheng May 20 '23 at 23:36

score 208 · Answer 2 · answered Oct 08 '09 at 17:01

208

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

or

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

answered Oct 08 '09 at 17:01

Pratik Stephen

2,175
1
11
11

1

Can confirm that Pratik's approach works on Safari on iOS (iPhone) too. – occulus Mar 24 '11 at 14:43
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 ``. – nornagon Jun 02 '11 at 08:30
9

this don't support by firefox, opera – meotimdihia Jul 08 '11 at 22:24
6

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 – Hashbrown Mar 07 '16 at 00:31
2

This approach is better because doesn't require `table-layout: fixed;`. – Finesse Apr 07 '17 at 01:40
Excellent solution when you use display: grid, thank you very much. – Lenin Zapata Mar 23 '20 at 10:13

score 169 · Answer 3 · edited Apr 06 '23 at 23:47

169

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.

edited Apr 06 '23 at 23:47

Cadoiz

1,446
21
31

answered Aug 11 '09 at 05:00

Rick Grundy

1,787
1
9
5

score 62 · Answer 4 · edited Jul 29 '21 at 06:18

62

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

edited Jul 29 '21 at 06:18

Nick Parsons

45,728
6
46
64

answered Aug 12 '09 at 00:08

psychotik

38,153
34
100
135

Oddy for me, when I removed the comment `// this works for all but td`, it works. – Example person Jan 14 '21 at 15:32
1

Note, this fundamentally changes how tables are laid out, eliminating the automatic column sizing that usually happens. Look up`table-layout` for more. – Alan H. Apr 28 '22 at 00:27

score 33 · Answer 5 · edited Jan 20 '19 at 17:46

33

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>

edited Jan 20 '19 at 17:46

Mark Amery

143,130
81
406
459

answered Apr 10 '11 at 05:14

loungerdork

991
11
15

2

You can add `min-width: 100%` along with `width` to ensure the `div` takes up the entire cell. – user1091949 Feb 16 '16 at 08:24
I want to do word wrap with comma (,). Like `Long,Long,Long,Long,Long`. I want to wrap this by after any comma (,). – Karthikeyan Apr 09 '19 at 09:30
This is the best solution! – Rufat Jun 28 '23 at 19:34

Slava · Answer 6 · 2018-01-05T22:08:05.167

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 https://www.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"*. — Mark Amery, Jan 20 '19 at 17:19
You don't even need a separate `div`, but thanks a lot for this! — Glorfindel, Jun 06 '22 at 10:27

Piotr Findeisen · Answer 7 · 2019-01-21T19:56:17.987

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.

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. — Mark Amery, Jan 20 '19 at 18:06
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. — Mark Amery, Jan 20 '19 at 18:17
@MarkAmery you're right. However, even with plain ASCII this isn't great. I added "warnings". — Piotr Findeisen, Jan 21 '19 at 19:57

score 18 · Answer 8 · edited Jan 20 '19 at 17:01

18

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>

edited Jan 20 '19 at 17:01

Mark Amery

143,130
81
406
459

answered Apr 12 '16 at 02:39

Duc Nguyen

464
3
6

-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. – Mark Amery Jan 20 '19 at 17:05

score 16 · Answer 9 · edited Sep 24 '19 at 12:53

16

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

edited Sep 24 '19 at 12:53

Rishab

1,484
2
11
22

answered Aug 12 '11 at 06:21

AabinGunz

12,109
54
146
218

-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 Jan 20 '19 at 17:55

score 10 · Answer 10 · edited Jan 20 '19 at 17:01

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>

score 10 · Answer 11 · edited Jan 20 '19 at 17:02

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>

This basically just repeats what [loungerdork's answer](https://stackoverflow.com/a/5609929/1709587) already said months earlier without adding any new information or insight. — Mark Amery, Jan 20 '19 at 17:53

score 9 · Answer 12 · edited Jan 20 '19 at 17:34

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.

score 8 · Answer 13 · answered Jan 11 '13 at 07: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>

score 8 · Answer 14 · edited Aug 25 '13 at 01:23

8

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

edited Aug 25 '13 at 01:23

Cody Guldner

2,888
1
25
36

answered Jun 01 '11 at 09:44

Sarawut Positwinyu

4,974
15
54
80

2

-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. – Mark Amery Jan 20 '19 at 17:41

Balaji · Answer 15 · 2020-09-06T13:56:30.747

8

i tried all but in my case just work for me

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

edited Sep 06 '20 at 13:56

answered Sep 06 '20 at 10:34

Balaji

9,657
5
47
47

score 7 · Answer 16 · answered Jan 21 '22 at 13:40

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.

score 6 · Answer 17 · edited Jun 02 '14 at 18:39

6

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>

edited Jun 02 '14 at 18:39

Peter Mortensen

30,738
21
105
131

answered May 20 '14 at 13:22

Lavekush Agrawal

6,040
7
52
85

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](https://stackoverflow.com/a/1883702/1709587) suggesting that, so this answer doesn't add any new information. – Mark Amery Jan 20 '19 at 17:32

score 5 · Answer 18 · answered Dec 11 '15 at 13:43

5

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 '15 at 13:43

Fusion

5,046
5
42
51

There's already a [much older answer](https://stackoverflow.com/a/1883702/1709587) suggesting to use `table-layout: fixed`; this one doesn't add anything new to the page. – Mark Amery Jan 20 '19 at 17:31

score 5 · Answer 19 · answered Sep 07 '20 at 05:25

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;

score 5 · Answer 20 · answered Jun 29 '21 at 13:42

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>

score 4 · Answer 21 · answered Jul 31 '20 at 14:01

4

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 '20 at 14:01

Darkcoder

802
1
9
17

1

it works without changing table style.... on Chrome today. – Aftershock Oct 04 '21 at 19:00

score 4 · Answer 22 · edited Sep 24 '19 at 14:29

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.

ironsam · Answer 23 · 2009-08-11T05:19:51.240

1

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

td {
   display: table-cell;
}

edited Aug 11 '09 at 05:19

answered Aug 11 '09 at 04:10

ironsam

630
5
15

-1; text in *any* HTML element wraps by default, not just tables. The suggestion here doesn't really make any sense. – Mark Amery Jan 20 '19 at 17:30
This is just not an answer and should be far below the answer that appends it. – Husk Rekoms Aug 31 '21 at 23:39

score 1 · Answer 24 · edited Jan 20 '19 at 17:20

1

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.

edited Jan 20 '19 at 17:20

Mark Amery

143,130
81
406
459

answered Oct 01 '14 at 18:37

Bobby

45
5

This is basically a duplicate as the [top-voted answer](https://stackoverflow.com/a/1883702/1709587); in both cases the solution boils down to "use `table-layout: fixed`". – Mark Amery Jan 20 '19 at 17:21

Adarsh Singh · Answer 25 · 2020-01-29T06:55:37.387

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>

score 0 · Answer 26 · answered Aug 18 '20 at 09:06

0

Just add width. This worked for me.

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

answered Aug 18 '20 at 09:06

Lawrence Njenga

196
9

score 0 · Answer 27 · answered May 11 '21 at 21:35

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>

score 0 · Answer 28 · edited Jun 02 '14 at 18:40

0

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

edited Jun 02 '14 at 18:40

Peter Mortensen

30,738
21
105
131

answered Oct 10 '11 at 12:53

Antoine Guiral

111
1
1
6

Word-wrap in an HTML table

28 Answers28

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

css

Linked

Related