SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
 window.onload = function(){
     var text = document.getElementById("overflowhidden");
     var str = text.innerHTML; 
     window.onresize = function(){
         overflowhidden("overflowhidden",3,str);
     }
     overflowhidden("overflowhidden",3,str);
 }
 
  var overflowhidden = function(id, rows, str){
      var text = document.getElementById(id);
      var style = getCSS(text);
      var lineHeight = style["line-height"];   //获取到line-height样式设置的值 必须要有
      var at = rows*parseInt(lineHeight);      //计算包含文本的div应该有的高度
      var tempstr = str;                       //获取到所有文本
      text.innerHTML = tempstr;                //将所有文本写入html中
      var len = tempstr.length;
      var i = 0;
     if(text.offsetHeight <= at){             //如果所有文本在写入html后文本没有溢出，那不需要做溢出处理
         /*text.innerHTML = tempstr;*/
     }
     else {                                   //否则 一个一个字符添加写入 不断判断写入后是否溢出
         var temp = "";
       text.innerHTML = temp;
         while(text.offsetHeight <= at){
             temp = tempstr.substring(0, i+1);
             i++;
            text.innerHTML = temp;
         }
       var slen = temp.length;
         tempstr = temp.substring(0, slen-1);
         len = tempstr.length
         text.innerHTML = tempstr.substring(0, len-3) +"...";     //替换string后面三个字符 
         text.height = at +"px";                                  //修改文本高度 为了让CSS样式overflow：hidden生效
     }
     
 }

            
 <body>
    <div class="common">
        <h2>example</h2>
        <div class = "demo">
            <div class="text" id="overflowhidden">吉日兮辰良，穆将愉兮上皇；抚长剑兮玉珥[ěr]，璆[qiú]锵鸣兮琳琅；瑶席兮玉瑱[zhèn]，盍[hé]将把兮琼英；灵连蜷兮既留，烂昭昭 游兮周章；灵皇皇兮既降，猋[biāo]远举兮云中；览冀洲兮有余，横四海兮焉穷；思夫君[zhèn][zhèn][zhèn]兮太[zhèn]息，极劳心兮忡忡。</div>
         </div>
       </div>
    <script type="text/javascript" src="js/common.js"></script>
</body>

            
 .text{display: -webkit-box; 
 display: -moz-box;  
  white-space: pre-wrap; 
 word-wrap: break-word;
  overflow: hidden; 
 text-overflow: ellipsis; 
 -webkit-box-orient: vertical; 
  -webkit-line-clamp:2;   /*显示行数*/
}

            

                
本项目引用的自定义外部资源