Can someone please tell me why this is not truncating the text? the last cell just keeps growing. I don't want cells to grow beyond their allowed percentage.
<HTML>
<TABLE id=section1 width="100%">
<TBODY>
<TR style="TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">
<TD style="WIDTH: 8%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL A</TD>
<TD style="WIDTH: 18%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL B</TD>
<TD style="WIDTH: 22%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL C</TD>
<TD style="WIDTH: 14%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL D</TD>
<TD style="WIDTH: 12%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL E</TD>
<TD style="WIDTH: 10%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL F</TD>
<TD style="WIDTH: 12%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL G</TD>
<TD style="WIDTH: 4%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG</TD>
</TR>
</TBODY>
</TABLE>
</HTML>
Here is a demo on jsFiddle
Best Answer
add
word-wrap: break-word
to your cell style..Though you should really avoid inline styles and declare a class for the cells..
updated:
jsfiddle