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

Mathilda ·

更新时间:2024-09-20

· 1290 次阅读

核心代码


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

到此这篇关于table不让td文字溢出操作方法的文章就介绍到这了,更多相关td内容溢出内容请搜索软件开发网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持软件开发网！

方法 td table

1024 个赞