Make "text-overflow: ellipsis" work inside a table cell *without* setting "table-layout:fixed"

Question

There are several SO questions regarding making text-overflow: ellipsis work inside a table cell. And the solution is mostly settings table-layout: fixed.

Why can't I do that? Well, because I have dynamic cell widths.

http://jsfiddle.net/d7h437he/2/

The button cell should "fit-to-content" and the copy cell should take the rest. This kind of layout is not possible with table-layout: fixed because the button cell would need to have a width specified, which I can't since it's dynamic.

How to truncate the copy cell?

Note: "not possible" is a valid answer and will be accepted. :)

Answer 1

The problem is that, when you don't use table-layout: fixed, cells are at least as wide as the minimum width required by the content. Therefore, the text can't overflow the cell, it's the table which overflows the container instead.

However, there is a workaround. You can wrap the contents of the cell inside an inner container with

width: 0;
min-width: 100%;

The former will prevent the cell from growing as wide as the text, and the latter will make the inner container fill the whole cell.

.container {
  width: 520px;
  background: yellow;
  padding: 6px;
  margin-bottom: 10px;
}
.table {
  display: table;
  width: 100%;
}
.table > * {
  display: table-cell;
}
.copy {
  width: 100%; 
}
.copy > div {
  width: 0;
  min-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.button {
  white-space: nowrap;
}

<div class="container">
  <div class="table">
    <div class="copy"><div>Lorem ipsum</div></div>
    <div class="button">Save</div>
  </div>
</div>
<div class="container">
  <div class="table">
    <div class="copy"><div>Lorem ipsum</div></div>
    <div class="button">Update and save</div>
  </div>
</div>
<div class="container">
  <div class="table">
    <div class="copy"><div>Lorem ipsum</div></div>
    <div class="button">Cancel</div>
  </div>
</div>
<div class="container">
  <div class="table">
    <div class="copy"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus eius fugit non dolorum ipsam fuga laborum consectetur minus atque nisi nobis voluptatum aut doloremque tenetur maiores officiis quibusdam vitae voluptate.</div></div>
    <div class="button">Cancel</div>
  </div>
</div>

Answer 2

This is without using table-cells though. May be something you should consider using.

.container {
  width: 520px;
  background: yellow;
  padding: 6px;
  margin-bottom: 10px;
}
.button {
  white-space: nowrap;
  float: right;
  margin-left: 30px;
}
.copy {
  overflow: hidden; 
}
.copy .wid100{
  width: 100%;
  overflow: hidden;  
  white-space: nowrap; 
  text-overflow: ellipsis;
}
.clear{
  clear: both;
}

<div class="container">
    <div class="table">
      <div class="button">Cancel</div>
      <div class="copy">
          <div class="wid100">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus eius fugit non dolorum ipsam fuga laborum consectetur minus atque nisi nobis voluptatum aut doloremque tenetur maiores officiis quibusdam vitae voluptate.
          </div>
      </div>
      <div class="clear"></div>
    </div>
</div>