drei Punkte - Überlauf:Ellipse

Question

Meine Frage ist, warum "text-overflow:ellipsis;" funktioniert nicht für mich? Ich habe eine Tabelle auf meiner Seite und möchte einen Text in einer Zelle (td) kürzen. Wie Sie sehen können, habe ich keine Breite Parameter in css. Ich erhalte diesen Wert aus json und dann setze ich ihn mit jquery. Vielleicht ist dies das Problem? Wenn ja, wie kann ich es lösen?

#myTable2 td{
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:47px;
    border-top: solid 1px #ebebeb;
    border-spacing:none;
    cellpadding: 0;
    cellspacing: 0;
    font-family:arial;
    font-size: 8pt;
    color: #3D3D3D;
    padding: 4px;
}

Ich habe es in Chrome 19, dem neuesten Firefox und IE9 getestet. Danke

Answer 1

Sie benötigen eine Breite der Tabelle und table-layout:fixed;

http://jsfiddle.net/CagPK/

#myTable2 td{
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}
#myTable2 
{
    table-layout:fixed;
    width: 100px;
}

Answer 2

text-overflow arbeitet mit display: block Elemente, während die Tabellenzellen display: table-cell Elemente. Umschließen Sie Ihren Text in einem <div> sollte funktionieren (fiddle legt die Breite fest, wenn Sie auf den Text klicken).