制作＆＃34;文本溢出：省略号＆＃34;在表格单元格内工作*没有*设置＆＃34;表格布局：固定＆＃34;

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

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

Answer 3

我遇到了同样的问题，并使用jQuery找到了解决方案。

HTML：

<div class="table">
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="right">Lorem Ipsum</div>
</div>

在CSS中，您使用标准省略号代码，但添加max-width: 0（正如here解释的实际table元素）：

.table {
    display: table;
    width: 100%;
}

.left, .right {
    display: table-cell;
    padding: 0 5px 0 5px;

    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

如果你停在那里，你最终会让每个孩子div占据父母div总宽度的50％，所以你仍然没有适合内容的动态宽度。为了解决这个问题，我调整this code, which calculates the width of the text in an element,来计算宽度，然后使用它来动态设置右列的宽度。然后左列将具有省略号。

// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com>
$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

$('.right').on('input', function() {
    var $width = $(this).textWidth(); // Get width of text
    $width += 10; // Add left and right padding
    $(this).width($width); // Set width
}).trigger('input');

请注意，上述代码要求您考虑padding;否则，右列也会有省略号。这是fiddle。

要在具有多行的表中使用它，您可以修改列中单元格的jQuery迭代，并将列的宽度设置为列中最宽单元格的必需宽度。或者，如果你知道哪一个是最宽的（你似乎会从你的小提琴那里），你可以直接指导jQuery来获得它的宽度。