JS实现表格内容溢出显示省略号

JavaScript08

JS实现表格内容溢出显示省略号,第1张

好问题.....但是....

css不更好吗?

就目前而言,js实现几率为0....当然你愿意去做是可以的,用width/一个字符的宽度,然后得到的商是这个element的最大字符数量,但是现在的字符有些不等宽,会造成溢出或不够。。。

文本溢出

有些时候,文本会超出一个元素,这通常称为文本溢出,我们使用text-overflow来进行文本溢出的操作,如下:

text-overflow:[ clip | ellipsis | <string>]{1,2}

clip 这个关键字的意思是"在内容区域的极限处截断文本",因此在字符的中间可能会发生截断驾为了能在两

个字符过渡处截断,你必须使用一个空字符串值 ('')此为默认值驾

ellipsis 这个关键字的意思是☆用一个省略号 ('□', U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本★驾这个

省略号被添加在内容区域中,因此会减少显示的文本驾如果空间太小到连省略号都容纳不下,那么这个省

略号也会被截断驾

<string> <string>用来表示被截断的文本驾字符串内容将被添加在内容区域中,所以会减少显示出的文本驾如果空

间太小到连省略号都容纳不下,那么这个字符串也会被截断驾

<FULL_PAGE_VALUE> 全局值 inherit | initial | unset

纯手打,求采纳o(^▽^)o

一般在网页中控制文字的显示字数且多余的字用省略号代替。不会有js代码的。那种反而浪费时间。用下面的方法。只要给那个css标签定义一下样式就行了。

.css {display:block/*内联对象需加*/

width:31em

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

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

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

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

}

=================================

对于表格的话,定义有一点不一样:

==============CSS================

table{

width:30em

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

}

td{

width:100%

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

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

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

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

}