使"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>

Answer 2

但这是在不使用表格单元的情况下进行的。可能是您应该考虑使用的东西。

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

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