Wrapping table data without table-layout?

Question

I need to wrap text within a <td> element, but I can't use the css table-layout property as the output is to html e-mail body and Outlook doesn't support the table-layout property.

Is there some other way to wrap text within a <td> element, or do I need to do the line breaking and measuring manually in code?

Here is an example of what I am trying to acheive:

td {
  border: solid black 1pt;
  font-family: arial;
  font-size: 10pt
}

thead td{
  text-align:center;
  font-weight:bold;
}

table {
  border-collapse: collapse
}

<html>

<body>
  <table style="width:35pt;height:24pt;table-layout:fixed">
    <thead>
      <tr>
        <td style="width:35pt;height:12pt">Good</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="width:35pt;height:12pt;word-wrap:break-word">Costingly Cost Cost</td>
      </tr>
    </tbody>
  </table>
  
  <div style="height:50pt"></div>

  <table style="width:35pt;height:24pt;">
    <thead>
      <tr>
        <td style="width:35pt;height:12pt">Bad</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="width:35pt;height:12pt" nowrap>Costingly Cost Cost</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Give this method a try: [HTML TD wrap text](https://stackoverflow.com/questions/1057574/html-td-wrap-text). I know its not for emails but for tables in general. — Syfer, Jun 01 '17 at 10:37
Unfortunately this is no good. All the proposed solutions relied on using either the `table-layout` or `max-width` css properties; neither of which are supported by Outlook. — Jake Conkerton-Darby, Jun 01 '17 at 11:24
this is for emails: https://stackoverflow.com/questions/10096012/break-long-words-in-html-email-in-outlook-2010 — Syfer, Jun 01 '17 at 11:27
That suggestion appears to work out for me, if you want to write it up as an answer I'll happily accept it. — Jake Conkerton-Darby, Jun 02 '17 at 09:04

score 1 · Accepted Answer · answered Jun 02 '17 at 09:43

1

Use the Microsoft proprietary word-break:break-all;

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

That should fix things.

answered Jun 02 '17 at 09:43

Syfer

4,262
3
20
37

1

As a note for anyone reading this, I ended up with `` which resulted in the correct wrapping behaviour in both Outlook and Gmail (I haven't yet tested with other clients). – Jake Conkerton-Darby Jun 02 '17 at 09:46
Thanks K you for the one up :-) – Syfer Jun 02 '17 at 09:50

score 0 · Answer 2 · answered Jun 01 '17 at 09:16

0

You can try this:

<tr>
<td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>

answered Jun 01 '17 at 09:16

Trần Hà Nguyễn

59
10

Unfortunately this doesn't quite work, while the text does wrap, it wraps at the word breaks which can increase the width of the `` element. If I use `table-layout:fixed` and `word-wrap:break-word` then I get the correct wrapping while maintaining the width of the ``. I'll add an example snippet in the question to elaborate. – Jake Conkerton-Darby Jun 01 '17 at 09:32

Wrapping table data without table-layout?

2 Answers2