Question

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

所以，我的问题是，有没有办法可以使用CSS（最好是＆lt; 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生成...截断文本和剪辑只剪辑文本...

TD { 文本溢出：省略号; / *或text-overflow：clip; * / }

CSS修剪表内容

2 个答案: