CSS实现table td中文字的省略与显示(兼容IE与FF、

我们需要对table进行样式设置，确保其在不同浏览器中都能正确展现。基本的CSS代码如下：

```css

table {

}

```

接下来是关键的样式类 `.autocut`，它负责实现文本的省略和恢复显示功能：

```css

.autocut {

overflow: hidden; / 隐藏超出容器的内容 /

white-space: nowrap; / 文本不换行 /

text-overflow: ellipsis; / 超出部分以省略号显示 /

/ 下面的几行是为了兼容不同浏览器的私有属性 /

-o-text-overflow: ellipsis; / Opera /

-icab-text-overflow: ellipsis; / Old IE /

-khtml-text-overflow: ellipsis; / KHTML (旧版浏览器如Safari等) /

-moz-text-overflow: ellipsis; / Firefox /

-webkit-text-overflow: ellipsis; / Chrome 和 Safari /

}

```

当用户的鼠标悬停在带有 `.autocut` 类的 td 上时，文本将恢复完整显示。这是通过 `:hover` 伪类实现的：

```css

.autocut:hover {

overflow: visible; / 恢复显示超出部分 /

white-space: normal; / 恢复文本自动换行 /

word-wrap: break-word; / 强制换行 /

}

```

使用这个样式非常简单，只需将 `autocut` 类应用到你的 td 元素上即可。例如：

HTML代码示例：

```html

```最后要注意的是，为了确保在IE浏览器中能正常工作，HTML文件中必须包含这句声明： `