html - 使 "text-overflow: ellipsis"在表格单元格内工作 *无需* 设置 "table-layout:fixed"

Question

关于使 text-overflow: ellipsis 在表格单元格内工作有几个 SO 问题。解决方案主要是设置 table-layout: fixed。

为什么我不能这样做？嗯，因为我有动态单元格宽度。

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

按钮单元格应该“适合内容”，复制单元格应该占据其余部分。 table-layout: fixed 无法实现这种布局，因为按钮单元格需要指定宽度，而我不能指定宽度，因为它是动态的。

如何截断复制单元格？

注意:“不可能”是有效答案，将被接受。 :)

Answer 1

问题是，当您不使用 table-layout: fixed 时，单元格至少与内容所需的最小宽度一样宽。因此，文本不能溢出单元格，溢出容器的是表格。

但是，有一个解决方法。您可以将单元格的内容包裹在一个内部容器中

width: 0;
min-width: 100%;

前者会阻止单元格增长到与文本一样宽，后者会使内部容器填满整个单元格。

.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>