CSS text-overflow: ellipsis in Table

Question

I have a Table

<table class="tbl" border="1">   
    <tr>
        <td width="20%"><span class="spn">column one is a long one</span></td>
        <td width="60%"><span class="spn">column two</span></td>
        <td width="20%"><span class="spn">column three is the longest of all columns</span></td>
    </tr>
</table>

and CSS-Settings:

.spn
{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: inherit;
  color: red;    
}

.tbl
{
  width: 300px
}

I want the first and third column to be 20% width and the second should be 60% of the 300px table width. The text should be fill the full td and end with ... at the end. How to achieve this?

http://jsfiddle.net/8jgmnyn5/

What about using jquery or javascript? In this way it is not that hard to solve. Or you want to achieve this with pure css? — d_z90, Apr 27 '15 at 13:41
possible duplicate of [Why doesn't CSS ellipsis work in table cell?](http://stackoverflow.com/questions/10372369/why-doesnt-css-ellipsis-work-in-table-cell) — Chris Spittles, Apr 27 '15 at 13:49
@ChrisSpittles Not a duplicate. This user has already solved the problem of the ellipsis. — Mr Lister, Apr 27 '15 at 13:51

score 4 · Accepted Answer · answered Apr 27 '15 at 13:46

You have two problems.

For the table, you'll need table-layout:fixed. Otherwise it will prioritise displaying all the contents over the given column widths.
The spans have width:inherit, but the table columns have widths like 20%, so the spans will be 20% of 20%, which I'm sure is not what you meant. So get rid of the width on the spans. display:block type elements don't need widths.

.spn {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*width: inherit;*/
  color: red;    
}

.tbl
{
  width: 300px;
  table-layout:fixed;
}

Then the result will look like this fiddle.

score 0 · Answer 2 · answered Apr 27 '15 at 13:42

0

You want something like this?

http://jsfiddle.net/8jgmnyn5/2/

your altered css looks like this:

.spn {
  display: block;
  color: red;    
}

.spn:after {
    content: "…";
}

answered Apr 27 '15 at 13:42

Doml The-Bread

1,761
1
11
17

almost, i want to avoid newline with `white-space: nowrap;` - the text can be cut off when it doesn't fit – fubo Apr 27 '15 at 13:44

CSS text-overflow: ellipsis in Table

2 Answers2