td超过的文字设置省略号

最新推荐文章于 2022-11-07 22:24:24 发布

cyj7696

最新推荐文章于 2022-11-07 22:24:24 发布

阅读量1.9k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/cyj7696/article/details/80943635

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

加样式
text-overflow:ellipsis;
-moz-text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;
table再加上
table-layout:fixed;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
<style>
	table{
		margin:0 auto;
		width: 300px;
		margin-top: 20px;
		margin-bottom: 20px;
		font-family: "微软雅黑";
		table-layout:fixed;
	}
	table td{
		border-bottom: 10px solid #666666;
		/*下面4行是实现超过td文字变省略号,另外还要给table加上table-layout:fixed;*/
		text-overflow:ellipsis;
		-moz-text-overflow:ellipsis;
		overflow:hidden;
		white-space: nowrap;
	}
</style>
<body>
	<div>
		<table cellpadding="3" cellspacing="0">
			<tr><td>啊啊啊啊啊a a aaaaaaa</td><td>发发发</td><td> 的方法</td><td>的非官方</td></tr>
			<tr><td>sss</td><td>aaa</td><td>aaa</td><td>aaa</td></tr>
			<tr><td>sss</td><td>aaa</td><td>aaa</td><td>aaa</td></tr>
			<tr><td>sss</td><td>aaa</td><td>aaa</td><td>aaa</td></tr>
			<tr><td>sss</td><td>aaa</td><td>aaa的非官方的股份给电饭锅</td><td>aaa</td></tr>
			<tr><td>sss</td><td>aaa</td><td>aaa</td><td>aaa</td></tr>
			<tr><td>sss</td><td>aaa</td><td>aaa</td><td>aaa</td></tr>
			<tr><td>sss</td><td>aaa</td><td>aaa</td><td>aaa</td></tr>
			<tr><td>sss</td><td>aaa</td><td>aaa</td><td>aaa</td></tr>
		</table>
	</div>
</body>
</html>

cyj7696

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
td超过的文字设置省略号

加样式 text-overflow:ellipsis; -moz-text-overflow:ellipsis; overflow:hidden; white-space: nowrap; table再加上 table-layout:fixed;&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta...
复制链接

扫一扫