td超过的文字设置省略号

加样式
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>

没有更多推荐了,返回首页