Unexpected behavior with no-wrap children of table elements

Question

I have an element that is intended to span a single line. The width of the element should be the width of the document. If the contents of the element overflow, the overflow should be clipped and replaced with ellipsis.

I wrote this CSS to accomplish that:

.inner {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

However, I did not get back the expected behavior. The text just overflowed.

When I looked maybe ten levels up the document tree I found grandparent elements styled as a table and table-cell which, even though they had explicit widths of 100% as well, wrapped around the no-wrap child.

Since, the nowrap child was using a relative width, the width was set by the table element.

Does this make sense and are there any reasonable workarounds?

Here's a jsfiddle, try commenting the tables out: https://jsfiddle.net/q3jzh085/

Answer 1

You just need to set table-layout: fixed on table element.

Cells use the overflow property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won't overflow the cells.

.table {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.table-cell {
  display: table-cell;
}
.inner {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="table">
  <div class="table-cell">
    <div class="inner">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  </div>
</div>