您的位置:首页 > Web前端 > CSS

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

2016-10-14 15:18 316 查看
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>

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息