利用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或者jquery怎么实现超出指定行数就在后面出现省略号