超出显示省略号兼容写法(css文字溢出变省略号)

小伙伴们,对于省略号呢,咱们前端攻城狮的实现方法可就是多种多样了,那接下来呢我就给你罗列一下如果用css书写这些特殊效果,来一起看看吧

超出显示省略号兼容写法(css文字溢出变省略号)

1、单行文本超出显示省略号

效果图:

实现代码:

HTML部分

<h3>使用css实现单行省略号</h3><divclass=”box1″><ahref=”#”class=”a1″>Loremipsumdolorsitametconsecteturadipisicingelit.Ipsamipsaexplicaboquossapienteeaerror,mollitianecessitatibusanimifacereremnonsedvelitaperiamlaboriosamdebitis.Quaedelenitidoloremquenisi.</a></div>

CSS部分

h3{padding-left:10px;}.a1{text-decoration:none;color:#000;padding-left:20px;}.box1{height:40px;line-height:40px;background-image:linear-gradient(white,gray);box-shadow:002px2pxrgb(148,145,145);box-sizing:border-box;/*单行显示省略号*/overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

注:此案例为京东首页的部分切图,此时的省略号可以用上述代码实现。

2、多行显示省略号

效果图:

HTML部分

<h3>使用css实现三行之后显示省略号</h3><divclass=”box2″><ahref=”#”class=”a1″>Lorem,ipsumdolorsitametconsecteturadipisicingelit.Fugitdictalaudantiumaspernaturilloid,beataemollitiamagnam,laboriosamcupiditateharumveritatisullamdelectusadipisciquasi,laborumipsumquisestmolestiae.</a></div>

CSS部分

h3{padding-left:10px;}.a1{text-decoration:none;color:#000;padding-left:20px;}.box2{height:60px;line-height:30px;background-image:linear-gradient(white,gray);box-shadow:002px2pxrgb(148,145,145);overflow:hidden;/*三行显示省略号*/display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}

实际案例应用场景说明:

注:此时明显是折行后在第二行多余的部分显示省略号,那由于内容不固定字数不固定,所以需要动态设置,那么就应用到了上述的多行显示省略号的方法。

3、内容中间显示省略号(方法一)

效果图:

HTML部分

<h3>使用css实现中间显示省略号方法一</h3><divclass=”box3″>Lorem,ipsumdolorsitametconsecteturadipisicingelit.Commodiperferendisistesit!Etquosaspernatursuscipitabqui?Cumquedebitisfugiatabfugitrepudiandae,veleiuserrornisiminus<span></span><ahref=”#”>全文</a></div>

css部分

.box3{/*height:120px;*/line-height:30px;background-image:linear-gradient(white,gray);box-shadow:002px2pxrgb(148,145,145);}.box3span::after{content:’……’;}

实际案例应用场景说明:

4、内容中间显示省略号(方法二)

效果图:

HTML部分

<h3>使用css实现中间显示省略号方法二</h3><divclass=”box4″><ahref=”#”><spanclass=”span1″title=”我是左侧内容我是左侧内容我是左侧内容”>我是左侧内容我是左侧内容我是左侧内容</span><spanclass=”span2″title=”我是右侧内容我是右侧内容”></span></a></div>

css部分

.box4{height:30px;line-height:30px;background-image:linear-gradient(white,gray);box-shadow:002px2pxrgb(148,145,145);}.box4.span1{float:left;width:62%;height:30px;line-height:30px;overflow:hidden;}.box4a{color:#000;}.box4.span2::before{content:attr(title);width:38%;float:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;}/*优化两个span中间的间距*/.box4{text-align:justify;}

实际案例应用场景说明:

综上所述:以上四种方案是目前页面中应用较多的实现省略号的方法,仅代表个人观点,如您有更优的方法欢迎文章底部留言。

超出显示省略号兼容写法(css文字溢出变省略号)

– End –

近期课程上新:

推荐阅读

发表评论

登录后才能评论