div中实现溢出文字省略显示非截取的代码

发布时间:2020-07-17编辑:脚本学堂
文中讲述让div中文字显示在一行,将溢出的文字省略显示,并不是用直接截取的方式,应用到text-overflow:ellipsis、white-space:nowrap、overflow:hidden需要的朋友参考一下。

Html代码
 

复制代码 代码示例:
1.<html>
2.<head>
3.<style type="text/css">
4./*<![CDATA[*/
5.li {
6.width:200px;
7.white-space:nowrap;
8.text-overflow:ellipsis;
9.-o-text-overflow:ellipsis;
10.overflow: hidden;
11.}
12./*]]>*/
13.</style>
14.</head>
15.<body>
16.<ul>
17.<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
18.<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
19.<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
20.<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
21.<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
22.</body>
23.</html>
 

这样div的文字就会以省略的形式显示,并不是单独的截取,还可以加个title鼠标放上显示。
想要div以省略的形式显示的时候,只单独设定text-overflow:ellipsis;是没有效果的。因为它仅仅是注解,标注溢出时以省略的形式显示。必须要有white-space:nowrap,让文字显示子一行,又要用overflow:hidden来使溢出的内容隐藏。
2.计算一个字符串的长度

因为每个浏览器计算字符串的长度的方法不一样,所以在使用省略显示的时候可能会造成在不同的浏览器中显示的效果不一样。所以想要知道一个字符串的长度,
可以将它放到一个span标签,即<span>string1string2</span>.然后使用jquery中的width()方法就可以得到在不同的浏览器中该字符串的长度了,即
$("span").width()。

以上就是溢出文字省略显示(非截取)的方法。