如何让表格单元格在一行中显示尽可能多的文本，例如 GMail 和 Google Reader？

Posted 2023-03-06

【中文标题】如何让表格单元格在一行中显示尽可能多的文本，例如 GMail 和 Google Reader？

【英文标题】：How do you make table cells show as much text as fits in one line, like GMail and Google Reader?

【发布时间】：2011-08-25 06:14:47

【问题描述】：

制作表格（不一定使用表格标签）的最佳方式是什么没有换行？喜欢 Gmail 和 Google 阅读器。

我真的很喜欢这种展示信息的方式。可扩展的固定高度行是扫描数据列表的好方法，恕我直言。

【参考方案1】：

见：http://jsfiddle.net/gtRnn/

<p>What is the best way *snip*</p>

p 
    border: 1px dashed #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis

每个属性都在做一些有用的事情：

white-space: nowrap 强制文本保持在一行。 overflow: hidden 停止 this。 text-overflow: ellipsis 适用于“所有浏览器”，except Firefox (support is planned) border 无缘无故。

【讨论】：

+1 表示text-overflow，虽然不是 100% 兼容浏览器。

感谢您的简单回答！

【参考方案2】：

其他答案在表格中不起作用，如下所示：http://jsfiddle.net/gtRnn/8/ - 该链接还包含正确的方法。

解决方法是将表格上的table-layout 样式设置为fixed，并为每一列赋予一个百分比或绝对宽度。 table-layout: fixed; 告诉浏览器不要根据内容计算表格的宽度，而是根据给定每个单元格的显式宽度。

工作示例： http://jsfiddle.net/gtRnn/8/

代码：

<style type="text/css">
    .my-table 
        /* This is important for ellipsis to work in tables.
           Don't forget to explicitly set the widths on all columns. */
        table-layout: fixed;
        width: 100%;              /* The table must be given a width. */
    

    .overflow-ellipsis 
        overflow: hidden;        /* Ellipsis won't work without this. */
        text-overflow: ellipsis; /* The most important part */
    
</style>

<table border="1" class="my-table">
    <tr>
        <td >1.</td>
        <td  class="overflow-ellipsis">
            In this TD, wrapping still occurs if there is white space.
            ButIfThereIsAReallyLongWordOrStringOfCharactersThenThisWillNotWrapButUseEllipsis
        </td>
    </tr>
    <tr>
        <td >2.</td>
        <td  class="overflow-ellipsis" style="white-space:nowrap;">
            In this TD, wrapping will not occur, even if there is white space.
        </td>
    </tr>
</table>

混合百分比宽度和绝对宽度不能正常工作（至少在 Google Chrome 中）。

【参考方案3】：

关键是overflow: hidden; 和white-space: nowrap;

<div style="width: 200px; overflow: hidden; white-space: nowrap;">some long text.............asdfasdf........</div>