软件学堂

网游分类软件分类

JS代码实现文字过长时的省略界面

2012-10-19 来源:网络

【实例名称】

文字过长时的省略界面

【实例描述】

有时候为了在一个页面中显示所有的新闻信息,通常只显示内容的一部分.然后用省略号代替后面的内容。如果内容是固定的,则使用HTML元素可以解决;如果数据来自数据库,属于动态内容,该如何实现内容的省略呢,本例介绍如何动态实现文字过长时的省略界面

【实例代码】

 

<html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>无标题页</title> <script Language="javascript"> var sText="这是一段很长的文本,希望通过省略号实现"; var content; function OmitText() {    content="<nobr>" +sText +"</nobr>";    document.getElementById("mydiv").innerHTML=content; } </script> </head> <body> <input type=button value=加载 onclick="OmitText()"> <DIV STYLE="width: 150px; height: 50px; border: 1px solid black; overflow: hidden; text-overflow:ellipsis" id="mydiv"> </DIV>

</body> </html>

 

【运行效果】

运行效果

【难点剖析】

本例的重点是“<nobr>”标签,这是DHTML自带的标签,用来在不换行的情况下,实现文本的修饰。本例中其主要功能是当div内的文本过长时,不对文本进行换行操作,而是以省略号替代超长的文本显示。

【源码下载】

本实例JS代码下载

上一篇:JS代码限定文本框可输入字符数
下一篇:音频输出设备安装详解

相关文章