Why doesn't CSS ellipsis work in table cell?

html css ellipsis
Misha Moroshko picture Misha Moroshko · Apr 29, 2012 · Viewed 130.9k times · Source

Consider the following example: (live demo here)

The output is: width = 139, and the ellipsis doesn't appear.

What am I missing here?

Answer

Misha Moroshko picture Misha Moroshko · Apr 29, 2012

Apparently, adding:

td {
  display: block; /* or inline-block */
}

solves the problem as well.

Another possible solution is to set table-layout: fixed; for the table, and also set it's width. For example: http://jsfiddle.net/fd3Zx/5/

Related questions

Applying an ellipsis to multiline text

Is there a solution to add ellipsis on last line inside a div with a fluid height (20%)? I found the -webkit-line-clamp function in CSS, but in my case the line number will be depending on window size. p { width:100%; height:20%; …

Read More
With CSS, use "..." for overflowed block of multi-lines

with overflow: hidden; text-overflow: ellipsis; white-space: nowrap; "..." will be shown in the end of the line if overflowed. However, this will be shown only in one line. But I would like it to be shown in multi-lines. It may looks …

Read More
HTML - how can I show tooltip ONLY when ellipsis is activated

I have got a span with dynamic data in my page, with ellipsis style. .my-class { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 71px; } <span id="myId" class="my-class"></span> document.getElementById('myId').innerText = "..."; I'd like to …

Read More