菲律宾j9集团|Home

135-2716-3909
网站建设资讯详细

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

发表日期:2026-07-10 09:13:21   作者来源:林志平   浏览:3574   标签:网页前端制作    
为了提高□□□知名度,展示企业◤的形象、企业的实□□力,推广企业□□□□的发展理□□□念,越来越多□□企业做起□□□了自己的□□□□网站,通过网站,在互联网□□□上达到营□□销企业自□□□□身的目的。随着互联□□□□网的飞速□□□□发展,企业越来□□□□越多都做□□□起了网站,网站就犹□□如企业的▲一张名片,需要精心□□□设计和构□□建的。那么,在设计制□□作网站页□□面的时候,也许会遇□□□□到各种各□□□样的问题,或大或小,但是总是◎会尽可能□□□□的去完善□□这一系列□□□的问题。下面是我·在网站项□□□□目的制作✦中遇到的□□□□一个小问□□□□题点。如下图:
 

前端效果

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

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

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

HTML代码2
 
 
如没特殊注明,文章均为菲律宾j9集团原创,转载请注明来自https://www.tyjwx.com/news/5947.html