首页 > 代码库 > 文本字数过多时,以省略号显示

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

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

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

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