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

JavaScript019

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

先说一下,看看能不能自己实现了。

不知道页面上面是不是可以用c:if标签,如果不可以,而用得是嵌入java代码的形式,也行。自己看着判断一下字符串的长度,如果超过一定的长度(可以设为十个或者几个字),就显示截取固定长度的字符串,然后后面显示省略号。这是省略号的显示。

鼠标尝过,显示全部文本。这一点做到其实比较简单。最简单的方式就是,把已经显示的内容(比如,上面截取出来的字符串),外面加上一个标签(可以是font),然后在利用这个标签的title属性,类似如下:

<td><font title="这里是显示的所有文字,没有任何省略">这里是显示的简略文字</font></td>

这样,在鼠标划过的时候,就能显示出完整的内容

再者,就是通过标签的onmouseover,来控制了。

<html>

<body>

<table>

<td><div onmouseover="document.getElementById('001_word_detail').style.display=''"

onmouseout="document.getElementById('001_word_detail').style.display='none'"

id="001_word" >这里是显示的文字的简略内容</div>

<div style="display:noneposition:absolute" id="001_word_detail">这里显示的是全部的文字,没有一点简略</div>

</td></table>

</body>

</html>

试试看。

当然,如果是大量的数据,而且里面又有各种标点符号的话,可能还是需要一楼说得,得借助ajax了。

看看前面说得这两种方法,能不能满足需要么。

天天开心呀。。。

:)

只给出简单的代码:\x0d\x0avar str="这里是字符串aaaa"//原始字符串\x0d\x0avar s = str//要展示的字符串\x0d\x0aif(str.length>10){\x0d\x0a s=str.substring(0,10)+"..."\x0d\x0a}\x0d\x0aalert(s)