利用css3实现超出文本指定行数与省略号效果

Posted 凡悟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用css3实现超出文本指定行数与省略号效果相关的知识,希望对你有一定的参考价值。

<style>
.text1 {
/*单行*/
width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -moz-text-overflow:ellipsis; white-space:nowrap; } .text2 {
/*多行*/
width:200px; word-break:break-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } </style>
<div class="text1">热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div>
 
<div class="text2">热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div>

 

以上是关于利用css3实现超出文本指定行数与省略号效果的主要内容,如果未能解决你的问题,请参考以下文章

CSS:实现文本超出显示省略效果(可指定几行显示)

css或者jquery怎么实现超出指定行数就在后面出现省略号

CSS文本超出指定行数后省略号显示

移动端文本超出设定行数后省略的方法

手机网页里,一段文本超出显示省略号(…),这个CSS怎么设置

多行文本超出部分以省略号显示