当前日期时间
当前时间:
网站标志
Logo
全站搜索
广告位
phpweb图片广告
广告位
phpweb图片广告
自定内容

phpweb已经是国内最强的的开源电子商务系统了,但并非完美,因为任何...

互联网3年一轮回,京东凡客等电商品牌在三年之前也不过是小打小闹,而如...

电商已经成为趋势,传统行业的竞争已经逐渐演变到网络上,也有不少用Weboss...

phpweb系统是固定的模式,适用于大部分行业与需求。但有一些行业还是有自己...

当前位置
文章正文

使用CSS处理超长溢出的文本

发表:管理员  发表时间:2016-10-22 09:47:47   阅读:(1378)次  

如果网页要呈现的是动态信息,比如新闻之类的,字数可能就无法控制。

UI设计的完美布局有可能被溢出的内容搞砸。

使用CSS处理超长溢出的文本

这种情况可以由后台处理,把将要呈现到前端的信息截取合适的长度。不过这样感觉后台的压力好大,布局变化一次,就要重新计算一下要截什么长度才合适。

CSS可以完美解决这个问题。

使用CSS处理超长溢出的文本

如上图所示,overflow和text-overflow配合使用,可以把超出范围部分文字将被隐藏,并且使用省略号替换了文字最后部分。以下是效果图:

使用CSS处理超长溢出的文本

为了做出文本溢出的效果,代码中使用了white-space:norap,可以强制文本不换行。

 

脚注信息
© 2005-2015 草莓互联(100cm.cn) 广州同福信息科技有限公司 版权所有,并保留所有权利。

广州市东莞庄一横路116号 粤ICP备11046216号-7

经营性网站备案信息 广州网络警察报警平台 不良信息举报中心  百度信誉档案 广州工商红盾网 可信网站认证