您正在使用IPV4(44.192.247.184)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       悟空收录网      

【腾讯云】云服务器等爆品抢先购,低至4.2元/月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2023年 元宵节 4
2023年 情人节 13
2024年 元 旦 334
2024年 春 节 374
 
您现在的位置:首页 >> 脚本程序 >> 内容
本类新增
本类热门文章
table不让td文字溢出操作方法
内容摘要: 核心代码table{width:100px;table-layout:fixed;/*只有定义了表格的布局算法为fixed,下面td的定义才能起作用。*/}td{width:100%;word-break:keep-all;/*不换行*/white-space:nowrap;/*不换行*/overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*......
核心代码

table{

width:100px;

table-layout:fixed;/*只有定义了表格的布局算法为fixed,下面td的定义才能起作用。*/

}

td{

width:100%;

word-break:keep-all;/*不换行*/

white-space:nowrap;/*不换行*/

overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/

text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...);需与overflow:hidden;一起使用*/

}

补充

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属性的值。

注释:任何的版本的InternetExplorer(包括IE8)都不支持属性值“inherit"。

text-overflow取值为

clip修剪文本。

ellipsis显示省略符号来代表被修剪的文本。

string使用给定的字符串来代表被修剪的文本。

所有主流浏览器都支持text-overflow属性。

white-space取值为

normal默认。空白会被浏览器忽略。

pre空白会被浏览器保留。其行为方式类似HTML中的

标签

nowrap文本不会换行,文本会在在同一行上继续,直到遇到

标签为止。

pre-wrap保留空白符序列,但是正常地进行换行。

pre-line合并空白符序列,但是保留换行符。

inherit规定应该从父元素继承white-space属性的值。

注释:任何的版本的InternetExplorer(包括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进行操作文本内容会超出表格,不换行。

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:HTML中button标签点击实现页面跳 下一篇:table设置超出部分隐藏,鼠标移上去显
发布日期:2022/12/20
手机扫二维码直达本页
发布时间:14:13:48
点  击:17
录  入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.3.5.220928(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2023