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

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


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


当前回答

简单地添加以下规则到你的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。

其他回答

有一个更简单、更优雅的解决方案。

在你想要应用截断的表格单元格中,只需包含一个带有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/

如果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);
        }
    });
});

你可以设置右边单元格的宽度为所需宽度的最小值,然后应用overflow-hidden+text-overflow到左边单元格的内部,但是Firefox在这里有bug…

不过,flexbox似乎能帮上忙

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

我有同样的问题,但我需要显示多行(其中text-overflow:省略号;失败)。我解决它使用一个TD内的文本区域,然后样式它的行为像一个表格单元格。

    textarea {
        margin: 0;
        padding: 0;
        width: 100%;
        border: none;
        resize: none;

        /* Remove blinking cursor (text caret) */
        color: transparent;
        display: inline-block;
        text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */
        &:focus {
            outline: none;
        }
    }