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

如何仅通过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  所属类别:软件开发
相关内容
伟创技术-婷婷:身为.NET程序员的断想 2017/2/18
【洛阳网络公司技术分享】身为.NET程序员的断想 2016/1/28
再好的硬件产品也要软件来支撑 2015/1/26
windows消息之PostMessage和SendMessage的内部实现 2013/4/17
如何仅通过CSS实现多行文本超长自动省略号 2013/4/3
猜你喜欢
网站盈利前需要迈过的第一道坎 2013/5/30
伟创科技如何看待先出网站版面再付定金问题的解答 2014/12/6
伟创观察:OLPC“每童一机”普及网络教育的失败 2012/10/24
企业网站也应该向大型网站学习些小技巧 2013/4/25
贺伟创科技携手洛阳逢源物资网站托管及维护培训项目 2014/9/15
软件生存周期的基本内容 2012/10/16
不懂技术怎么运作网站 2013/4/1
洛阳专业网站建设步骤方法 2014/7/24
建网站必要关注哪些重点 2018/2/26
Instagram数据完爆Twitter,Facebook没事偷着乐 2012/10/1
伟创热点
关于我们
公司简介
我们的优势
企业文化
公司愿景
加入伟创
伟创官方博客
金牌项目
网站建设
网站优化
软件开发
整合设计
网站运营
伟创科技官网论坛
网站套餐
基础型网站
展示型网站
商务型网站
购物、商店型网站
FLASH动画型网站
行业、门户型网站
帮助中心
客户中心
公司SEO培训
seo顾问服务
支付方式
联系我们
我们的位置
关注我们
新浪微博
腾讯微博
人人小站
QQ空间推荐
花瓣网
建站百科全书
Copyright 2007-2012 LYWHY.Inc Sitemap 豫ICP备12012069号-1
Links
洛阳百科
建站百科