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内的文本过长时,不对文本进行换行操作,而是以省略号替代超长的文本显示。
【源码下载】