table文字超出省略

最新推荐文章于 2022-05-10 19:47:57 发布

qjhsmd2015

最新推荐文章于 2022-05-10 19:47:57 发布

阅读量1.2k

点赞数

分类专栏： html&css

本文链接：https://blog.csdn.net/qjhsmd2015/article/details/78752262

版权

html&css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>table文字超出省略</title>
<style type="text/css">
table{ width:50%;table-layout: fixed;}
.name{width: 10%;}
.age{width: 20%;}
.sex{width: 30%;}
.addr{width: 40%;}

table{table-layout: fixed;}
td{
white-space: nowrap;/*控制单行显示*/
overflow: hidden;/*超出隐藏*/
text-overflow: ellipsis;/*隐藏的字符用省略号表示*/
}

.duohang{

overflow: hidden;
text-overflow:ellipsis;//文本溢出显示省略号
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
width:130px;

}

</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>25</td>
<td>女</td>
<td>嘿嘿嘿嘿嘿嘿省略吗嘿嘿嘿嘿嘿嘿省略吗嘿嘿嘿嘿嘿嘿省略吗嘿嘿嘿嘿嘿嘿省略吗</td>
</tr>

</tbody>
</table>

多行省略嘿嘿嘿嘿嘿嘿省略吗嘿嘿嘿嘿嘿嘿省略吗嘿嘿嘿嘿嘿嘿省略吗嘿嘿嘿嘿嘿嘿省略吗

</div>
</body>
</html>

qjhsmd2015

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table文字超出省略

&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;table文字超出省略&lt;/title&gt; &lt;style type="text/css"&gt
复制链接

扫一扫

专栏目录