html表格单元格内容超出时显示省去号结果
发布时间：09/01 来源：未知 浏览：
关键词：
说明
在前端开发中，经常会碰到需要限制单元格宽度并且内容超出部分显示省略号的的状况。下面就简便的介绍下怎样到达这种结果。
预备知识
1. 操纵文本不换行
white-space: nowrap;
2. 超出长度时，显现省略号
overflow:hidden;
text-overflow:ellipsis
3. 修改表格规划算法
table-layout:fixed;table-layout的默许值为automatic，意思是列宽度由单元格内容设定。而fixed意思是列宽由表格宽度和列宽度设定。
也就是说当你给表格设定列宽时，实际状况是不起作用的，当单元格内容过多时，仍然会把宽度撑开。假如需要让表格的列宽显示方式由本人给单元格定义的列宽决议，就必需使用fixed这个值。
留意：1、表格必需设定宽度 2、假如只设定表格宽度，而不设定列宽度的话，列的宽度会均匀分配。
代码演示
如下代码所示，表格中安排了姓名、年龄、性别乃至地址四列，这几个列的长度离别为10%、20%、30%、40%。
XML/HTML Code复制内容到剪贴板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表格演示</title>
<style type="text/css">
table{
width: 100%;
table-layout: fixed;
}
.name{
width: 10%;
}
.age{
width: 20%;
}
.sex{
width: 30%;
}
.addr{
width: 40%;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="name">姓名</th>
<th class="age">年龄</th>
<th class="sex">性别</th>
<th class="addr">地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>李四</td>
<td>13</td>
<td>男</td>
<td>山东</td>
</tr>
<tr>
<td>李四</td>
<td>13</td>
<td>男</td>
<td>山东</td>
</tr>
<tr>
<td>李四</td>
<td>13</td>
<td>男</td>
<td>山东</td>
</tr>
</tbody>
</table>
</body>
</html>显示结果如下所示：
很容易可以看出，姓名、年龄、性别乃至地址等列的长度离别是10%、20%、30%、40%。
假如将第一个的姓名内容增多，结果几乎不忍直视（＞﹏＜）！
不忍直视（＞﹏＜）！！
怎样把单行内容超出部分显示为省略号呢？只需要将单元格设定如部属性：
XML/HTML Code复制内容到剪贴板
white-space: nowrap;/*操纵单行显示*/ overflow: hidden;/*超出潜藏*/ text-overflow: ellipsis;/*潜藏的字符用省略号表示*/
话不多说，上代码！
XML/HTML Code复制内容到剪贴板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表格演示</title>
<style type="text/css">
table{
width: 100%;
table-layout: fixed;
}
.name{
width: 10%;
}
.age{
width: 20%;
}
.sex{
width: 30%;
}
.addr{
width: 40%;
}
td{
white-space: nowrap;/*操纵单行显示*/
overflow: hidden;/*超出潜藏*/
text-overflow: ellipsis;/*潜藏的字符用省略号表示*/
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="name">姓名</th>
<th class="age">年龄</th>
<th class="sex">性别</th>
<th class="addr">地址</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name2">李四sssssssssssssssssssssssssssssssssss</td>
<td>13</td>
<td>男</td>
<td>山东</td>
</tr>
<tr>
<td>李四</td>
<td>13</td>
<td>男</td>
<td>山东</td>
</tr>
<tr>
<td>李四</td>
<td>13</td>
<td>男</td>
<td>山东</td>
</tr>
</tbody>
</table>
</body>
</html>修改后，结果如下：
相关引荐：
多种实例解析HTML表单form的使用办法
以上就是html表格单元格内容超出时显示省略号结果的具体内容，更多请关注百分百源码网其它相关文章！
