CSS 修剪表内容

Question

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

所以，我的问题是，有没有一种方法可以使用CSS（最好是< CSS3 for better IE compatibility) to show text in a table cell up to the cell's width, then hide any overflow with out pushing out the width of the table?

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 在截断的文本处生成

...

，并且剪辑仅剪辑文本...

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