css table ellipsis 用法

chen106106

浏览: 406533 次
性别:
来自: 深圳

最近访客更多访客>>

linsonlmy

feiyue81

Kira_喵

kt-zhang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS学习笔记

css table ellipsis

text-ellipsis:ellipsis; 主要用来控制文本超过指定的内容宽度后超过部分以...省略号的形式显示

需要注意的几点

1、应该设置表格的table-layout:fixed;，默认是auto ，浏览器会根据单元格里面的内容多和少自动扩展单元格的宽和高，

如果设置了，那么浏览器就会按照我们指定的宽度显示内容。

2、设置容器的宽度

3、设置文本的换行模式

white-space:nowrap;word-break:keep-all;

如果不设置上面的换行模式显示为：

设置了以后变成了

4、设置容器溢出为隐藏

overflow:hidden;

5、设置文本溢出时候的样式

text-overflow: ellipsis;

完整的代码

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">

			.container{ width: 500px;height:auto; margin: 20 auto;}
			table.tftable { table-layout:fixed;font-size:14px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;overflow:hidden;}
			table.tftable th {font-size:14px;background-color:#EDEEEC;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}
			table.tftable tr {background-color:#fff;}
			table.tftable .th1{ width:160px;}   
			table.tftable .th2{ width:120px;}   
			table.tftable .th3{ width:auto;}   
			table.tftable tr:hover{background-color: DFE64C}
			table.tftable td.url a{ text-decoration:none;}
			table.tftable td,table.tftable td  {font-size:14px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
			table.tftable tr td,table.tftable td strong{width:100%;text-overflow: ellipsis;white-space:nowrap;word-break:keep-all;overflow: hidden;}
		</style>
	</head>

	<body>
		<div class="container">
			
			<table id="tfhover" class="tftable">
			<tbody>
			<tr>
				<th class="th1">微博昵称</th>
				<th class="th2">微博发送状态</th>
				<th class="th3">微博地址</th>
			</tr>
			<tr>
				<td><strong>爱晒隐私---微博发送状态</strong></td>
				<td>成功</td>
				<td class="url"><strong><a href="http://weibo.com/2149506980/zdtToyEZ5" target="_blank">http://weibo.com/2149506980/zdtToyEZ5</a></strong>
				</td>
			</tr>
			<tr>
				<td>电影时空隧道</td>
				<td>成功</td>
				<td class="url"><strong><a href="http://t.163.com/-8646962972829192588/status/-5829115127760100928" target="_blank">http://t.163.com/-8646962972829192588/status/-5829115127760100928</a></strong>
				</td>
			</tr>
			</tbody>
			</table>
		</div>
	</body>

</html>