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

Posted 2023-05-09

不是超出宽度显示省略号，而是控制文本最多显示四行，超出四行后面就出现省略号，如下图： 如果是隐藏单行的请不要回复~

参考技术A 你好，看了
你的问题，单纯用css现在貌似解决不了，css只能实现溢出隐藏，用...来表示。
你需要隐藏中间部分内容，需要用到js啊。可以用js先算出字符串的长度，然后截取收尾两段显示，中间加...即可。

利用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>