1

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

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

4

2 回答 2

2

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

将此添加到您的 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">....
于 2011-07-04T07:34:43.887 回答
0

除了Firefox（我认为）之外，所有浏览器都支持这一点。Elipsis 产生 ... 在截断的文本和剪辑只是剪辑文本...

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

于 2011-07-04T04:01:12.473 回答