首页 > 其他 > 详细

文本字数过多时,以省略号显示

时间:2014-10-14 22:13:00      阅读:292      评论:0      收藏:0      [点我收藏+]

# 文本字数过多时,以省略号显示

1、对于table中单元格中的字符数超过限定的宽度时,以省略号显示,但是当鼠标悬浮在上面时,能够完整地显示出单元格的内容。
设置表格的标头中字符数限制(让标头单元格宽度固定)
```style
#dataTab{table-layout: fixed}
#dataTab th{
width:80px;
white-space: nowrap; //设置如何处理元素内的空白
word-break:keep-all;//换行规则
//normal 使用浏览器默认的换行规则。
//break-all 允许在单词内换行,可以在一个单词内如hello中的hell出换行
//keep-all 只能在半角空格或连字符处换行,保证字符的完整
overflow:hidden;
text-overflow:ellipsis; // clip|ellipsis|string三种取值
//clip 修剪文本。
//ellipsis 显示省略符号来代表被修剪的文本。
//string 使用给定的字符串来代表被修剪的文本。
}
```
悬浮效果:
```style
#dataTab th:hover
{
text-overflow:inherit;
overflow:visible;
}
```

文本字数过多时,以省略号显示

原文:http://www.cnblogs.com/lydialee/p/4025247.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!