[Web 前端] td长度固定，内容过长，超过部分用省略号代替

cp from : https://blog.csdn.net/bsh_csn/article/details/51829103

html的table表格中td长度固定，当内容过长时，超过部分用省略号代替. 具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
    <style type="text/css">  
.mytable {  
    table-layout: fixed;  
    width: 98% border:0px;  
    margin: 0px;  
}  

.mytable tr td {  
    text-overflow: ellipsis; /* for IE */  
    -moz-text-overflow: ellipsis; /* for Firefox,mozilla */  
    overflow: hidden;  
    white-space: nowrap;  
    border: 1px solid;  
    text-align: left  
}  
</style>  
</head>  
<body>  
    <table width="500px" class="mytable">  
        <tr>  
            <td width="20%">测试</td>  
            <td width="80%">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试123123</td>  
        </tr>  
    </table>  
</body>  
</html>

table的width一定要设置, 不然会出现文字太多时变形的情况.

注释:
原理：
本方法用于解决表格单元格内容过多时的美观问题，主要涉及到4句CSS样式：

table-layout: fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，fixed一下就好了。（注意：此样式是关键）
white-space: nowrap 是为了保证无论单元格（TD）中文本内容有多少，都不会自动换行，此时多余的内容会在水平方向撑破单元格。
overflow: hidden 隐藏超出单元格的部分。
text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

兼容性：
Internet Explorer 6, 7, 8, 9及以上版本

FireFox 最新版

Chrome 最新版

[Web 前端] td长度固定，内容过长，超过部分用省略号代替

猜你喜欢