text-layout ellipsis

by markallgood

HTML

<table class="tbl">
    <tr>
        <td>A cell</td>
    </tr>
    <tr>
        <td>
            <div>A cell with content that should really really really really overflow what's up with tables?<div>
        </td>
    </tr>
</table>
<p>
    <div id="overflow-test" style="width:100px; text-overflow:ellipsis;">Some pretty darn long text here</div>
</p>

CSS

.tbl {
    width:350px;
    table-layout:fixed;
    border-top: 5px solid #333;
    border-collapse: collapse;
    background: #fff;
     }
.tbl td {
    border-bottom: 1px dashed #333;
    padding: 2px 5px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
 } 
div#overflow-test { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }