Why doesn't CSS ellipsis work in table cell? - html

Question

Consider the following example: (live demo here)
$(function() {
console.log("width = " + $("td").width());
});
td {
border: 1px solid black;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Hello Stack Overflow</td>
</tr>
</tbody>
</table>
The output is: width = 139, and the ellipsis doesn't appear.
What am I missing here?

Answer 1

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/

Answer 2

It's also important to put
table-layout:fixed;
Onto the containing table, so it operates well in IE9 (if your utilize max-width) as well.

Answer 3

As said before, you can use td { display: block; } but this defeats the purpose of using a table.
You can use table { table-layout: fixed; } but maybe you want it to behave differently for some colums.
So the best way to achieve what you want would be to wrap your text in a <div> and apply your CSS to the <div> (not to the <td>) like this :
td {
border: 1px solid black;
}
td > div {
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Answer 4

Try using max-width instead of width, the table will still calculate the width automatically.
Works even in ie11 (with ie8 compatibility mode).
td.max-width-50 {
border: 1px solid black;
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<tbody>
<tr>
<td class="max-width-50">Hello Stack Overflow</td>
</tr>
<tr>
<td>Hello Stack Overflow</td>
</tr>
<tr>
<td>Hello Stack Overflow</td>
</tr>
</tbody>
</table>
jsfiddle.

Answer 5

Demo page
For tables with dynamic width, I found the below way to produce satisfying results. Each <th> which is wished to have trimmed-text ability should have an inner wrapping element which wraps the contents of the <th> allow text-overflow to work.
The real trick is to set max-width (on the <th>) in vw units.
This will effectively cause the element's width to be "bound" to the viewport width (browser window) and will result in a responsive content clipping. Set the vw units to a satisfying value needed.
Minimal CSS:
th{ max-width:10vw; }
th > .wrap{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
Demo (with editable texts):
document.designMode="on"
table {
font: 18px Arial;
width: 40%;
margin: 1em auto;
color: #333;
border: 1px solid rgba(153, 153, 153, 0.4);
}
table td, table th {
text-align: left;
padding: 1.2em 20px;
white-space: nowrap;
border-left: 1px solid rgba(153, 153, 153, 0.4);
}
table td:first-child, table th:first-child {
border-left: 0;
}
table th {
border-bottom: 1px solid rgba(153, 153, 153, 0.4);
font-weight: 400;
text-transform: uppercase;
max-width: 10vw;
}
table th > .wrap {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<table>
<thead>
<tr>
<th>
<div class="wrap" title="Some long title">Some long title</div>
</th>
<th>
<div class="wrap">Short</div>
</th>
<th>
<div class="wrap">medium one</div>
</th>
<th>
<div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>very long text here</td>
</tr>
</tbody>
</table>

Answer 6

Just offering an alternative as I had this problem and none of the other answers here had the desired effect I wanted. So instead I used a list. Now semantically the information I was outputting could have been regarded as both tabular data but also listed data.
So in the end what I did was:
<ul>
<li class="group">
<span class="title">...</span>
<span class="description">...</span>
<span class="mp3-player">...</span>
<span class="download">...</span>
<span class="shortlist">...</span>
</li>
<!-- looped <li> -->
</ul>
So basically ul is table, li is tr, and span is td.
Then in CSS I set the span elements to be display:block; and float:left; (I prefer that combination to inline-block as it'll work in older versions of IE, to clear the float effect see: http://css-tricks.com/snippets/css/clear-fix/) and to also have the ellipses:
span {
display: block;
float: left;
width: 100%;
// truncate when long
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Then all you do is set the max-widths of your spans and that'll give the list an appearance of a table.

Answer 7

Instead of using ellipsis to solve the problem of overflowing text, I found that a disabled and styled input looked better and still allows the user to view and select the entire string if they need to.
<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />
It looks like a text field but is highlight-able so more user friendly

Answer 8

Check box-sizing css property of your td elements. I had problem with css template which sets it to border-box value. You need set box-sizing: content-box.

Answer 9

I've tried many of the above solutions but none of them felt flexible or satisfying.
This little hack with max-width: 1px can be applied directly to the td element
.truncated-cell {
max-width: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Answer 10

Leave your tables as they are. Just wrap the content inside the TD's with a span that has the truncation CSS applied.
/* CSS */
.truncate {
width: 50px; /*your fixed width */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block; /* this fixes your issue */
}
<!-- HTML -->
<table>
<tbody>
<tr>
<td>
<span class="truncate">
Table data to be truncated if it's too long.
</span>
</td>
</tr>
</tbody>
</table>

Answer 11

.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
The above setting worked for me, without changing table widths. I added a div inside and added the class ellipsis to it.

Answer 12

If you don't want to set max-width to td (like in this answer), you can set max-width to div:
function so_hack(){}
function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}
function so_hack(){}
Note: 100% doesn't work, but 99% does the trick in FF. Other modern browsers doesn't need silly div hacks.
td {
border: 1px solid black;
padding-left:5px;
padding-right:5px;
}
td>div{
max-width: 99%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}