Question

我想在表格中显示文字，我希望在宽度大于150px时剪切它，但我不想要固定宽度的表格单元格（如果没有文字，宽度将为0px）。一切都适用于IE9，Firefox，Chrome，Opera，但不适用于IE8。

IE8中的代码示例：

enter image description here

Chrome中的代码示例：

enter image description here

以下是代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
td, span {
    border: 1px solid red;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

span {
    border: 1px solid green;
    display: block;
}
</style>
</head>
<body>
<table>
<tr>
    <td><span>Works in Firefox, Chrome, Opera, IE 7/9 (but not in IE 8)</span></td>
    <td>Works in Firefox, Chrome (and Opera but no dots)</td>
    <td style="display: block">Works in Firefox, Chrome and Opera (with dots)</td>
</tr>
</table>
</body>
</html>

可以在没有任何javascript或设置固定宽度的情况下这样做吗？

Answer 1

不幸的是，IE7和IE8对max-width css规则有很大的支持。所以不，没有javascript或固定宽度，你将无法可靠地做到这一点。如果它有帮助，你拥有的代码应该在IE 7 +中工作。

但是你可以通过在上面的规则之后添加条件css规则来使这两个浏览器只有固定的宽度：

<!--[if lte IE 8]>
    <style>
    td, span {
        width: 150px;
    }
    </style>
<![endif]-->

当您稍后将css移动到外部文件中时，您当然会将其更改为链接标记：

<!--[if lte IE 8]>
   <link rel="stylesheet" type="text/css" href="ie8.css" />
 <![endif]-->

或者，您可以使用javascript检测IE 7和8并将用户重定向到此页面：http://www.mozilla.org/de/firefox/new/

IE 8溢出：隐藏和最大宽度

1 个答案: