如何截断表单元格，但尽可能容纳更多内容? [英] How can I truncate table cells, but fit as much as content possible?

问题描述

遇见弗雷德.他是一张桌子:

Meet Fred. He's a table:

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

弗雷德(Fred)的公寓有个变大小的怪异习惯，因此他学会了隐藏自己的一些物品，以免将其他所有房间推倒，从而使惠特福德太太的客厅变得ob废:

Fred's apartment has a bizarre habit of changing size, so he's learned to hide some of his content so as not to push all the other units over and shove Mrs. Whitford's living room off into oblivion:

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

这有效，但是弗雷德(Fred)feeling不安地感觉到，如果他的右单元格(他的昵称为Celldito)放弃了一点空间，那么他的左单元格将不会被大部分时间截断.你能救他的理智吗?

This works, but Fred has a nagging feeling that if his right cell (which he's nicknamed Celldito) gave up a little space, his left cell wouldn't be truncated quite as much of the time. Can you save his sanity?

总结:只有当所有单元格都放弃所有空格时，表格的单元格才能均匀溢出吗?

In summary: How can a table's cells overflow evenly, and only when they've all given up all their whitespace?

推荐答案

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

这篇关于如何截断表单元格，但尽可能容纳更多内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！