javascript - three dots - overflow:ellipsis - Stack Overflow

admin管理员组

文章数量:1356901

My question is, why "text-overflow:ellipsis;" doesnt work for me? I have table on my page and i want to shorten some text inside cell(td). As you can see i have no width parameter in css. I get this value from json and then I set it with jquery. Maybe this is the problem? If so, how can i solve it?

#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;
}

I test it in Chrome 19, newest Firefox and IE9.. Thanks

My question is, why "text-overflow:ellipsis;" doesnt work for me? I have table on my page and i want to shorten some text inside cell(td). As you can see i have no width parameter in css. I get this value from json and then I set it with jquery. Maybe this is the problem? If so, how can i solve it?

#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;
}

I test it in Chrome 19, newest Firefox and IE9.. Thanks

• javascript
• jquery
• css

Share Improve this question Follow edited Jun 20, 2012 at 8:00 Clem asked Jun 20, 2012 at 7:52 ClemClem 11.8k88 gold badges3636 silver badges4848 bronze badges 3

• 1 How do you expect it to shorten the text, when you don't want to place a width limit on it? – lanzz Commented Jun 20, 2012 at 8:03
• yes lanzz this is my question...as i said, i set width from json file...i get there width parameters and then i set it using jaascriopt...width depends on the user... – Clem Commented Jun 20, 2012 at 8:06
• Sorry, misunderstood you. I thought you're setting the text, not the width. – lanzz Commented Jun 20, 2012 at 8:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You need a width of the table and table-layout:fixed;

http://jsfiddle/CagPK/

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

text-overflow works with display: block elements, while table cells are display: table-cell elements. Enclosing your text in a <div> should work (fiddle sets the width when you click on the text).

本文标签： javascriptthree dotsoverflowellipsisStack Overflow