table不让td文字溢出操作方法

ID:15951 / 打印

核心代码

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

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

text-overflow取值为

clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
所有主流浏览器都支持 text-overflow 属性。
white-space取值为
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的

标签

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

 标签为止。

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

上一篇: CSS样式覆盖的操作代码
下一篇: 详解CSS中postion和opacity及cursor的特性

作者:admin @ 24资源网   2024-10-30

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。