tbale文字超出显示省略号
代码很简单,一个简单表格
- 设置表格的样式table-layout:"fixed"再设置表格的宽度(这步必须)
- 设置文字过长部分需要用到text-overflow标签,设置为 ellipsis,意思为文本超出部分为省略号;
- 设置整体为本过长需要用white-space标签,设置为 nowrap,意思是文本不换行;
- 同时需要设置整体标签超出部分为不显示,设置方法为:overflow: hidden;
- 这样就ok了!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
table{
table-layout: fixed;
width: 100%;
}
</style>
<body>
<table border="1px">
<tr id="test" >
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>简介</td>
</tr>
<tr>
<td>大表格</td>
<td>23</td>
<td>男</td>
<td style="text-overflow:ellipsis; white-space: nowrap; overflow: hidden; ">
首先设置表格的样式table-layout:"fixed"再设置表格的宽度(这步必须)
在设置文字过长部分需要用到text-overflow标签,设置为 ellipsis,意思为文本超出部分为省略号;
同设置整体为本过长需要用white-space标签,设置为 nowrap,意思是文本不换行;
同时需要设置整体标签超出部分为不显示,设置方法为:overflow: hidden;
整体设置标签为:td {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
</td>
</tr>
</table>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/66591dc34a7704205b4233febd5dedfc.png)