css控制文字显示长度超过用省略号替代

高军威

浏览: 180586 次
性别:
来自: 北京

最近访客更多访客>>

caorucan

coreycool

zswzhj

fuanyu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css 要点

css text-overflow

css控制文字显示长度超过用省略号替代

这样节省了服务器的开销，减轻服务器压力；这部分工作由客户端完成了，而且代码维护起来也方便了。

text-overflow 属性

CSS3 text-overflow 属性：
http://www.w3school.com.cn/cssref/pr_text-overflow.asp

来张效果图：

一般还配合这个属性一块使用
overflow: hidden;
white-space: nowrap;
CSS3 text-overflow 属性：
http://www.w3school.com.cn/cssref/pr_text_white-space.asp

日常我们为了让文字内容在一行内显示完，哪怕宽度不够也不能换行，我们可以使用white-space样式，但如果遇到了html br强制换行标签，无论是设置white-space与否都会被<br>强制换行。

表格里使用text-overflow后不能隐藏超出的文本的解决方法

http://www.jb51.net/css/145465.html

<!DOCTYPE html>
<html>
<head>
<style> 
td{ 
text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden; 
border:1px solid;
} 
table{ 
border-collapse: collapse;
border:1px solid;
table-layout:fixed; 
} 
td:hover 
{ 
text-overflow:inherit; 
overflow:visible; 
} 
</style>
</head>
<body>

<table width="500" height="20"  >
<tr>
<td width="20%" height="20">将将建军节建军节将建军节建军节积极急急急急急急急急急急急急急急急积极急急急急急急急急急急急急急急急</td>
<td width="80%" height="20">节建军节积极急急急急急急急急急急急急急急急积极急急急急急急</td>
</tr>
<tr>
<td width="20%" height="20">将将建军节建军节将建军节建军节积极急急急急急急急急急急急急急急急积极急急急急急急急急急急急急急急急</td>
<td width="80%" height="20">节建军节积极急急急急急急急急急急急急急急急积极急急急急急急</td>
</tr>
<tr>
<td width="20%" height="20">将将建军节建军节将建军节建军节积极急急急急急急急急急急急急急急急积极急急急急急急急急急急急急急急急</td>
<td width="80%" height="20">节建军节积极急急急急急急急急急急急急急急急积极急急急急急急</td>
</tr>
</table>

</body>
<html>

效果图：