CSS：截断表单元格，但尽可能拟合 [英] CSS: Truncate table cells, but fit as much as possible

问题描述

认识Fred。他是一张表：

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的公寓有一个奇怪的习惯，改变大小，所以他学会了隐藏一些他的内容不要把所有其他单位推过去，把惠特福德夫人的客厅关掉了：

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有一种ging叨的感觉，如果他的右手单元（他的绰号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/

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