CSS 修剪表内容

Question

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

所以，我的问题是，有没有一种方法可以使用 CSS（最好是 < CSS3 以获得更好的 IE 兼容性）来显示表格单元格中的文本，直到单元格的宽度，然后隐藏任何溢出，而不会推出单元格的宽度桌子？

Answer 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">....

Answer 2

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

td {
  text-overflow: ellipsis;
  /* or text-overflow: clip; */
}