关于单行文字,多行文字溢出隐藏时 css jq处理方法 兼容各个浏览器

1.单行文字溢出隐藏css 处理方法

.user-list-info{

     white-space:nowrap; 

     text-overflow:ellipsis; 

     overflow: hidden; 

}

2. 2行或者多行文字溢出隐藏显示css处理方法(此方法不兼容IE浏览器,360兼容模式)

.user-list-info{

            color:#666;

            padding:0 26px;

            height:40px;

            line-height: 20px;

            word-break: break-all;

            text-overflow: ellipsis;

            display: -webkit-box;

            -webkit-box-orient: vertical; 

            -webkit-line-clamp: 2;

            overflow: hidden; 

   }   

3. 2行文字多行文字溢出隐藏 jq处理方法(兼容到IE8)

    1)首先引入jq包  jquery.ellipsis.js / jquery.min.js

     2) html 处理

  <div class="user-list-info  font-12">

         <p>汇聚强大的一站式视频服务及处理能力,为用户提供卓越的视频体验</p>

   </div>

     3)css 处理 :

.user-list-info{

width:170px;//给定宽 

line-height:20px; //给个line-height

margin:0 auto;

}

. font-12{

        font-size:12px;

}

     4) js处理:

<script>

        //此地要放在ajax 加载完数据后处理

        $('.user-list-info').ellipsis({

            english: false,

            lineNum: 2 //2行溢出隐藏

        });

</script>

 












  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值