项目问题总结【4】官网

项目背景：边锋官网
一、介绍 ：公司官网
二、问题总结
1.多行超出省略
(1)只显示单行

.text-overflow{
  width:100px;
  text-overflow:ellipsis;
  white-break:nowrap
}

(2)多行 【-webkit-line-clamp】兼容性较差, 目前仅支持webkit浏览器

.text-overflow{
    width:100px;
    overflow : hidden;
    text-overflow:ellipsis;
    display:-webkit-box; //将对象作为弹性伸缩盒子模型显示
    -webkit-line-clamp:2; //设置或检索伸缩盒对象的子元素的排列方式
    -webkit-box-orient: vertical;
}

【margin负值定位法】兼容所有主流浏览器

// html
<div class="text-wrap">
  <div class="text-body">这是文字主体部分这是文字主体部分这是文字主体部分这是文字主体部分</div>
  <div class="text-dotted"><div>
</div>

// css
.text-wrap{
  width:300px;
  overflow:hidden
}
.text-body{
   float:left;
   width:300px;
   margin-right:3em;
  overflow:hidden;
}
.text-dotted{
   float:left;
   margin-top:-1.3em;
}

【jquery限定字符个数】

HTML部分：
<div class="zxx_text_overflow_6">你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，kitty救我！</div>
css部分：
.zxx_text_overflow_6{width:400px;}
js部分：
var wordLimit=function(){
    $(".zxx_text_overflow_6").each(function(){
        var copyThis = $(this.cloneNode(true)).hide().css({
            'position': 'absolute',
            'width': 'auto',
            'overflow': 'visible'
        }); 
        $(this).after(copyThis);
        if(copyThis.width()>$(this).width()){
            $(this).text($(this).text().substring(0,$(this).html().length-4));
            $(this).html($(this).html()+'...');
            copyThis.remove();
            wordLimit();
        }else{
            copyThis.remove(); //清除复制
            return;
        }
    });
}
wordLimit();