table表格中文本溢出部分用省略号表示
来源:互联网 发布:数组中和等于k的数对 编辑:程序博客网 时间:2024/06/05 12:42
1.table表格想要设置文本溢出操作可按照如下方法
table{
width: 100%;
table-layout:fixed;}
注意:table必须设置table-layout:fixed;属性,文本溢出设置才能生效;
td{
width:300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
其中:table-layout取值为:
automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
text-overflow取值为
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
所有主流浏览器都支持 text-overflow 属性。
white-space取值为
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
注意:如果表格中有th和td标签,必须都设置宽度,如果给th设置宽度,td宽度不设置,那么设置table-layout:fixed;文本溢出生效后,td宽度将失效。
2.设置鼠标移动到上面显示全部内容,(1)非table表格可直接使用:hover进行相应设置
(2)table表格利用js设置方法
$(".list").delegate("td","mouseover",function(){
$("table").css("table-layout","automatic");
$(this).css({"white-space":"pre-wrap","overflow":"visible"});
});
$(".list").delegate("td","mouseout",function(){
$("table").css("table-layout","fixed");
$(this).css({"text-overflow":"ellipsis","white-space":"nowrap","overflow":"hidden"});
});
table表格中重点为设置table{table-layout:automatic},用hover进行操作文本内容会超出表格,不换行。
阅读全文
0 0
- table表格中文本溢出部分用省略号表示
- 多行文本溢出用省略号表示
- 多行文本溢出时用省略号表示溢出内容
- 设置table表格文字溢出显示省略号
- 对象内容溢出用省略号表示
- 文本内容溢出用省略号(...)表示
- CSS单/多行文本溢出部分显示省略号
- 关于li溢出部分用省略号代替
- 文本超出部分用省略号表示
- textview文本超出部分用省略号表示
- 文字超出部分用省略号表示
- div中文本过长时显示部分文本及省略号
- 多行文本溢出省略号
- table内容溢出显示省略号
- 用css控制标题字符溢出,用省略号表示
- 关于文字内容溢出用点点点(…)省略号表示
- 关于文字内容溢出用点点点(…)省略号表示
- 关于文字内容溢出用点点点(…)省略号表示
- 将博客搬至CSDN
- 关于Android Studio的安装教程详解
- Git 工作流
- 4-4 Shift Down如何从堆中取出一个元素(对应优先队列中出队这个操作)
- 我的计划
- table表格中文本溢出部分用省略号表示
- ucos ii学习笔记2 邮箱&&信息量
- 【13】下划线是否破坏可读性?
- ubuntu 搜狗输入法 kinect v2驱动+校准
- ERROR ITMS-90508
- 构造器
- Angular与React的区别
- JavaScript重点知识点大全整理,必备!
- numpy.linspace使用详解