Menu
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
597
To prevent cells (rows) from expanding vertically, you have to set a fixed height for table rows. Select the relevant rows and, on the Table Tools Layout tab, click Properties. On the Row tab, select "Specify height" and then choose "Exactly" for "Row height is." Specify the desired amount.
When the text in a single table cell exceeds a few words, a line break (<BR>) may improve the appearance and readability of the table. The line break code allows data to be split into multiple lines. Place the line break code <BR> within the text at the point(s) you want the line to break.
There are two methods to wrap table cell <td> content using CSS which are given below: Using word-wrap property: This property is used to allow long words to break and wrap onto the next line. Using word-break property: This property is used to specify how to break the word when the word reached at end of the line.
To make an ellipsis work on a table cell, you can use the CSS display property set to its "block" or "inline-block" value. In our example below, besides the display property, we set the text-overflow to "ellipsis", use the "nowrap" value of the white-space property, set the overflow to "hidden".
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
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
