主页/ 电商学院/网站开发/网页前端制作小知识-多行文字截取

网页前端制作小知识-多行文字截取

归类:网站开发
为了提高知名度,展示企业的形象、企业的实力,推广企业的发展理念,越来越多企业做起了自己的网站,通过网站,在互联网上达到营销企业自身的目的。随着互联网的飞速发展,企业越来越多都做起了网站,网站就犹如企业的一张名片,需要精心设计和构建的。那么,在设计制作网站页面的时候,也许会遇到各种各样的问题,或大或小,但是总是会尽可能的去完善这一系列的问题。下面是我在网站项目的制作中遇到的一个小问题点。如下图:
 

前端效果

当标题文字是需要超过设置的行数就显示省略号的时候,如若是单行省略,用到这三行样式即可,而且各大的浏览器兼容性也很好,只是只支持单行显示省略。

CSS代码
 
当需要做到多行省略的时候,就没有单行省略那么简单便捷。下面这种方式可以在不过多要求兼容性的时候可以用,因为-webkit-line-clamp不是一个规范的属性,只能兼容webkit内核的浏览器,兼容性不太好。但是多行显示省略的效果很不错。

CSS代码2
 
而如下的这种是用css 处理的巧妙的方式,个人认为是挺不错的。兼容性也挺好的,ie浏览器也能兼容,而且可以根据不用分辨率做出省略的调整,没有超出范围也不会显示省略号。显示省略号的时候可能有点不够美观,可以设置.text:after的背景图做的省略,就这样就会好很多了,具体需要的样式还需调整一些。
 
 HTML代码1

HTML代码2
 
 
网站声明:以上文章内容为优加的原创文章,如需转载,请注明出处,谢谢合作!
0 喜欢
384 浏览数

优加商学院

APP开发微信小程序开发网站开发
您好,直接联系技术沟通需求
扫码添加我的微信,直谈需求
非工作时间技术回复慢请谅解
咨询更详细需求
提交信息后我们会第一时间与你取得联系,请大致把需求填写在"咨询内容"里。
姓名
手机
咨询内容
立即提交