我如何截断表格单元格，但适合尽可能多的内容?

弗雷德会面。他是一张桌子:

<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)让出一点空间，他的左细胞就不会经常被截断。你能挽救他的理智吗?

总之:表的单元格如何才能均匀溢出，并且只有在它们都放弃了所有空白的情况下才能溢出?

当前回答

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

2013-10-13 05:26:38

其他回答

简单地添加以下规则到你的td:

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

例子:

表 { 宽度： 100% } 道明 { 空白：无换行; } .td-truncate { 溢出：隐藏; 文本溢出：省略号; 宽度： 100%; 最大宽度： 0; } <表边框=“1”> <tr> <td>内容</td> <td class=“td-truncate”>long contenttttttttt ttt</td> <td>其他内容</td> </tr> </table>

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

2018-05-30 13:25:08

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

JQuery，它连接了resize事件:

$(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);
        }
    });
});

2011-03-11 21:48:31

你可以试着“加权”某些列，像这样:

<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%宽度的列和使用一些组合的白色空间CSS属性。

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

你懂的。

2011-03-10 16:10:28

这个问题在谷歌的顶部弹出，所以在我的例子中，我使用了css代码片段从https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/，但应用到td没有给出预期的结果。

我不得不在td的文本周围添加一个div标签，省略号终于起作用了。

简写HTML代码;

<table style="width:100%">
 <tr>
    <td><div class='truncate'>Some Long Text Here</div></td>
 </tr>
</table>

缩写CSS;

.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

2018-07-30 17:10:33

几天前我也遇到了同样的挑战。看来路西法·萨姆找到了最好的解决办法。

但我注意到你应该在spacer元素复制内容。认为它不是那么糟糕，但我也想应用标题弹出剪切文本。这意味着长文本将在我的代码中出现第三次。

在这里，我建议在伪元素之后访问title属性以生成间隔并保持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/

2014-01-17 14:35:38

我如何截断表格单元格，但适合尽可能多的内容?

推荐文章

最新文章

标签