首页 > 代码库 > 文本字数过多时,以省略号显示
文本字数过多时,以省略号显示
# 文本字数过多时,以省略号显示
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;
}
```
文本字数过多时,以省略号显示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。