美文网首页
需要显示的字符过长使用...代替(js/css)

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

作者: de_self | 来源:发表于2018-08-26 21:23 被阅读12次

    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+'...');
    }
    

    相关文章

      网友评论

          本文标题:需要显示的字符过长使用...代替(js/css)

          本文链接:https://www.haomeiwen.com/subject/pwjpiftx.html