table表格中文本溢出部分用省略号表示

本文介绍如何使用CSS设置表格内的文本溢出显示省略号,并通过JavaScript实现鼠标悬停时显示完整文本的方法。

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进行操作文本内容会超出表格,不换行。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值