CSS:截断表格单元格,但尽可能合适

Question

认识Fred.他是一张桌子:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

弗雷德的公寓有一个改变大小的奇怪习惯,因此他学会隐藏他的一些内容,以免推动所有其他单位,并将怀特福德夫人的客厅推到遗忘之中:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

这是有效的,但弗雷德有一种唠叨的感觉,如果他的右侧牢房(他的绰号为Celldito)放弃了一点空间,他的左侧牢房就不会在很多时候被截断.你能救他的理智吗？

---

总结:一个表的单元格如何均匀地溢出,并且只有当它们都放弃了所有的空白时？

Answer 1

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

Answer 2

我相信我有一个非JavaScript的解决方案!迟到总比不到好,对吧？毕竟这是一个很好的问题,谷歌就是全力以赴.我不想满足于javascript修复,因为我发现页面加载后出现的轻微抖动是不可接受的.

特点:

• 没有javascript
• 没有固定的布局
• 没有加权或百分比宽度的技巧
• 适用于任意数量的列
• 简单的服务器端生成和客户端更新(无需计算)
• 跨浏览器兼容

工作原理:在表格单元格中,将内容的两个副本放在相对定位的容器元素中的两个不同元素中.间隔元件静态定位,因此将影响台单元的宽度.通过允许间隔单元的内容物包裹,我们可以获得我们正在寻找的表格单元的"最佳"宽度.这也允许我们使用绝对定位的元素将可见内容的宽度限制为相对定位的父元素的宽度.

经过测试和工作:IE8,IE9,IE10,Chrome,Firefox,Safari,Opera

结果图片:

JSFiddle:http://jsfiddle.net/zAeA2/

示例HTML/CSS:

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span>&nbsp;</span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}

Answer 3

几天前我遇到了同样的挑战.Lucifer Sam 似乎找到了最好的解决方案.

但是我注意到你应该在spacer元素上复制内容.认为它不是那么糟糕,但我也想title为剪辑文本应用弹出窗口.这意味着长文本将在我的代码中第三次出现.

在这里,我建议title从:after伪元素访问属性以生成spacer并保持HTML清洁.

适用于IE8 +,FF,Chrome,Safari,Opera

<table border="1">
  <tr>
    <td class="ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>

.ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

/* spacer content */
.ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/

Answer 4

如果Javascript是可以接受的,我会整理一个快速例程,您可以将其作为起点.它动态地尝试使用跨度的内部宽度来调整单元格宽度,以响应窗口大小调整事件.

目前,它假设每个单元通常获得行宽的50%,并且它将折叠右单元以使左单元保持其最大宽度以避免溢出.根据您的使用情况,您可以实现更复杂的宽度平衡逻辑.希望这可以帮助:

我用于测试的行的标记:

<tr class="row">
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
</tr>

连接resize事件的JQuery:

$(window).resize(function() {
    $('.row').each(function() {
        var row_width = $(this).width();
        var cols = $(this).find('td');
        var left = cols[0];
        var lcell_width = $(left).width();
        var lspan_width = $(left).find('span').width();
        var right = cols[1];
        var rcell_width = $(right).width();
        var rspan_width = $(right).find('span').width();

        if (lcell_width < lspan_width) {
            $(left).width(row_width - rcell_width);
        } else if (rcell_width > rspan_width) {
            $(left).width(row_width / 2);
        }
    });
});

Answer 5

有一个更简单,更优雅的解决方案.

在要应用截断的表格单元格中,只需包含一个带有css table-layout:fixed的容器div.此容器占用父表单元格的整个宽度,因此它甚至可以响应.

确保将截断应用于表中的元素.

适用于IE8 +

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

和css:

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

这是一个有效的小提琴 https://jsfiddle.net/d0xhz8tb/

Answer 6

只需将以下规则添加到您的td:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

例子：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

table {
  width: 100%
}

td {
  white-space: nowrap;
}

.td-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 0;
}

PS： 如果要将自定义宽度设置为另一个td使用属性min-width。

Answer 7

问题是'table-layout:fixed',它创建了均匀间隔固定宽度的列.但禁用此css属性将导致文本溢出,因为表将变得尽可能大(并且会有溢出).

我很抱歉,但在这种情况下,弗雷德不能吃他的蛋糕并把它吃掉......除非房东给予Celldito更少的空间与之合作,弗雷德不能使用他的..

Answer 8

您可以尝试"加权"某些列,如下所示:

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="80%" />
        <col width="20%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td>Less content here.</td>
    </tr>
</table>

您还可以尝试一些更有趣的调整,例如使用0%-width列并使用white-spaceCSS属性的某种组合.

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

你明白了.

Answer 9

是的，我想说三十点有它，除非你使用 js 方法，否则没有办法做到这一点。您正在谈论必须定义的一组复杂的渲染条件。例如，当两个单元格对于它们的公寓来说太大时会发生什么，您将必须决定谁具有优先权，或者只是给它们一定比例的面积，如果它们过满，它们都会占用该区域，并且只有当一个单元格有空白时才会占用该区域你在另一个单元格中伸展你的腿，无论哪种方式，都没有办法用 css 来做到这一点。尽管人们用 css 做了一些我没有想到的非常时髦的事情。我真的怀疑你能做到这一点。