2012/10/19 11:05:55作者:佚名来源:网络
【实例名称】
文字过长时的省略界面
【实例描述】
有时候为了在一个页面中显示所有的新闻信息,通常只显示内容的一部分.然后用省略号代替后面的内容。如果内容是固定的,则使用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代码
相关文章
够快云库v6.3.24.12120免费版
详情光影魔术手官方版 v4.7.1
详情ADsafe净网大师v5.4.408.7000
详情网易邮箱大师v5.3.2.1015电脑版
详情foxmailv7.2.25.375
详情暴风影音5v5.92.0824.1111
详情暴风影音v5.92.0824.1111
详情BitComet(比特彗星)v2.13.4.13Beta2
详情路由优化大师v4.5.31.267
详情茄子快传电脑版 v5.1.0.7
详情搜狐影音 v7.2.1.0官方版
详情搜狐影音客户端 v7.2.1.0
详情迅雷影音官方版 v7.0.3.92
详情cbox央视影音v6.0.3.4经典版
详情potplayer播放器v1.7.22496
详情Daum PotPlayer(已集成直播源)v1.7.22496绿色纯净美化便携增强版
详情天国拯救2黄金版 Build.17149332-1.1.1.11377中文版
详情燕云十六声电脑版 v1.9.31
详情潜行者2:切尔诺贝利之心 Build.16805297豪华中文版
详情模拟农场25豪华中文版
详情迷你世界电脑版 v1.41.00
详情骑马与砍杀2 v1.2.9.34019免费版
详情侠盗猎车手圣安地列斯 v1.0最新中文版
详情整蛊白云 v1.0
详情地平线4 v1.476中文版
详情圣女战旗中文v1.1.9绿色免安装版
详情狂怒2中文
详情红色警戒2共和国之辉电脑版 v1.0
详情模拟人生4 v1.0中文免费版
详情蛊婆v1.0免费版
详情风起云涌2越南中文版 v1.6Steam正版
详情使命召唤17官方中文版 v1.0
详情掌门好家长v5.10.0手机版
详情惠买v5.4.46官方版
详情快快查汉语字典综合官方版V5.0.0官方版
详情尚德机构v7.8.1官方版
详情头像精灵v3.7.0美化版
详情运满满货主版v7.92.1.0安卓版
详情运满满司机版app手机版v8.92.1.0安卓版
详情网易蜗牛读书水墨版V1.9.78
详情泼辣修图免费版v6.11.3安卓版
详情泼辣修图安卓版v6.11.3
详情汽车大师v7.15.5技师版
详情步多多v2.8.1安卓版
详情新浪新闻v8.43.7官方版
详情拓词v14.21安卓版
详情思尔健康v3.1.42安卓版
详情云上钢琴v4.0.3安卓版
详情