关于伟创 伟创新闻 伟创案例 网站套餐 联系方式
只做吸引客户的精品站!

如何仅通过CSS实现多行文本超长自动省略号

软件开发 / 2013/4/3 7:50:38
[核心提示] 在CSS中,我们可以通过下面的样式实现DIV元素中文本超长后自动截断并以省略号结尾。
如何仅通过CSS实现多行文本超长自动省略号
在CSS中,我们可以通过下面的样式实现DIV元素中文本超长后自动截断并以省略号结尾:
overflow: hidden;
word-break: normal;
text-overflow: ellipsis;

  text-overflow: ellipsis是实现文本截断后以省略号结尾的关键样式,但问题是如果添加该样式则DIV元素内的文本无法自动换行,也就是说该效果只被允许在单行文本上实现。另外,word-break: normal可以防止文字被部分截断,这个在内容为英文的情况下显得尤其重要。

  要实现多行文本自动截断以省略号结尾的效果,通常的做法是使用JavaScript脚本。下面这些文章给出了如何通过脚本进行字符串截断,不过仅限于英文环境。

  使用纯CSS样式来实现该效果则会稍微有些麻烦,你需要懂得如何在CSS中进行hack。这里是一个可以在多个通用浏览器中实现该效果的例子:

<!DOCTYPE HTML> <html> <head> <style> html, body, p { margin: 0; padding: 0; font-family: sans-serif;} .ellipsis { overflow: hidden; height: 200px; line-height: 25px; margin: 20px; border: 5px solid #AAA; } .ellipsis:before { content:""; float: left; width: 5px; height: 200px; } .ellipsis > *:first-child { float: right; width: 100%; margin-left: -5px; } .ellipsis:after { content: "\02026"; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; float: right; position: relative; top: -25px; left: 100%; width: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background: -webkit-gradient(linear, left top, right top,
                from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white)); background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); } </style> </head> <body> <div class="ellipsis"><div> <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p> </div></div> </body> </html>

  通过修改.ellipsis.ellipsis:before样式中height属性的值来指定容器的高度。该样式的实现在多个不同版本的浏览器下测试通过,注意如果你是在IE下查看则需要确保你的文档模型必须是在标准模式下,即Document Mode必须是Standards。

尊重作者原创 除非特别声明,伟创科技所有均为伟创原创报道,转载请注明原文链接。
原文地址:http://www.lywhy.com/SoftWare/View.asp?id=421  所属类别:软件开发
相关内容
洛阳软件开发需要多少钱? 2019/12/6
10种不同类型的软件开发 2019/11/5
如何更好的完成软件开发的项目 2018/9/18
伟创技术-婷婷:身为.NET程序员的断想 2017/2/18
【洛阳网络公司技术分享】身为.NET程序员的断想 2016/1/28
猜你喜欢
洛阳建站大优惠:1200元手工纯设计seo架构 2013/2/18
【SEO知识】作为初学者建设网站如何做好页面布局? 2016/4/28
洛阳建站公司会有一天被淘汰吗 2013/12/23
WhatsApp日信息量破70亿条 四个月增长75% 2013/1/3
网站制作的web标准是什么? 2015/9/28
优化网站内部链接结构可以提高网站权重 2013/10/7
遗传疾病不再来,GenePeeks让下一代健康成长 2012/11/27
网站建设前后言行一致方能收获信誉与利益 2015/6/11
你知道一个网站多面手需要哪些基本技能吗? 2013/7/8
如何做好全网营销?推广平台的选择很重要! 2021/7/2
伟创热点
关于我们
公司简介
我们的优势
企业文化
公司愿景
加入伟创
伟创官方博客
金牌项目
网站建设
网站优化
软件开发
整合设计
网站运营
网站套餐
基础型网站
展示型网站
商务型网站
购物、商店型网站
FLASH动画型网站
行业、门户型网站
帮助中心
客户中心
公司SEO培训
seo顾问服务
支付方式
联系我们
我们的位置
关注我们
新浪微博
腾讯微博
人人小站
QQ空间推荐
花瓣网
建站百科全书
Copyright 2007-2012 LYWHY.Inc Sitemap 豫ICP备12012069号-1
Links
洛阳百科
建站百科