需要显示的字符过长使用...代替(js/css)

2018-08-26  本文已影响12人  de_self

8-26,补23号的坑,,,,
没有及时整理,谴责一下自己。。。。。
对于html中过长的信息,不希望全部显示,超长部分用...代替的需求
可以通过css或者js两种方式解决
一、css方式


image.png
{
    -webkit-line-clamp: 1;/*限制行数*/
    overflow: hidden;/*超出部分隐藏*/
    display: -webkit-box;/*超出部分用(....)代替*/
    -webkit-box-orient: vertical;/*使文字竖排排列*/
}

前三个属性是在块元素如<div>中使用的
如果在<span><p>等非块元素中使用,则需要加第四个属性
js方式:

var a = $("#a").text();
if(a.length>5){
  var b = a.substring(0,5);
  $('#a').text(b+'...');
}
上一篇 下一篇

猜你喜欢

热点阅读