HTML and CSS Reference
In-Depth Information
Figure 14-22.
The columns are now the correct width, but long text overflows into the next column
7. To deal with the overflow, amend the style for table cells like this:
td {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
overflow: auto;
}
8.
Save and test the page in several browsers. Some add a horizontal scrollbar to the
bottom of the cell. Firefox and Opera just let the content spill out as before.
9. Change the style rule for table cells to deal with the overflow more elegantly:
td {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
overflow:
hidden
;
text-overflow: ellipsis;
}
10. Test the page again. All browsers shorten the overflow with an ellipsis
(see Figure
14-23
).
Figure 14-23.
The long text is replaced by an ellipsis
