CSS 修剪表格内容答案

【问题标题】：CSS Trim Table ContentCSS 修剪表格内容
【发布时间】：2017-08-13 16:18:57
【问题描述】：

我正在寻找一种方法来使用 CSS 来修剪表格单元格中的长内容。例如。假设一个给定的单元格包含的内容太长了。调整表格的宽度以适应这个非常长的内容。但是，由于表格已经占用了 100% 的宽度，因此很多表格会溢出窗口以适应此内容。

所以，我的问题是，有没有一种方法可以使用 CSS（最好是

【问题讨论】：

绝对是重复的。这是一个完整的常见问题解答。

标签： css overflow css-tables tablecell

【解决方案1】：

这是一个跨浏览器的解决方案。

将此添加到您的 CSS：

/** Custom CSS logic to truncate text with ellipsis **/
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('/assets/xml/ellipsis.xml#ellipsis');
}

将此文件 (ellipsis.xml) 添加到您的服务器（在本例中为 /assets/xml/）：

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text">
                    <children/>
                </xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

然后将该类添加到任何需要在溢出时截断的 DOM 节点：

<div class="ellipsis">....

【讨论】：

【解决方案2】：

除了Firefox（我认为）之外，所有浏览器都支持此功能。 Elipsis 在截断文本处生成 ...，而 clip 只是剪辑文本 ...

td { 文本溢出：省略号； /* 或文本溢出：剪辑；*/ }

【讨论】：

这不是一个 div (display:block)，而是一个表格单元格 (display:table-cell)。
@Phrogz - 在这个问题的上下文中，它是一个 td - 该属性适用于 div 和 td 类似