码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-10-14 22:31:49      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:style   使用   sp   table   text   如何   字符串   ip   word   

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

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;
}
```

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

标签:style   使用   sp   table   text   如何   字符串   ip   word   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!