根據容器的高度進行截取字符的長度

　　在實際工做中，不少時候都會有幾行幾行以後顯示省略號的需求，都知道單行省略號的需求很簡單，三個屬性就實現了(overflow: hidden;text-overflow:ellipsis;white-space:nowrap;),可是多行的話，就稍微麻煩一些了，網上也有不少實現方法，但不少都不兼容，那下面就說一下用js實現多行以後多餘的顯示省略號。

　　html:　　　

　　　　<div class="div0">
　　　　　　點擊修改高度：
　　　　　　<input type="radio" class="radio" value="50">50px
　　　　　　<input type="radio" class="radio" value="80">80px
　　　　　　<input type="radio" class="radio" value="110">110px
　　　　　　<input type="radio" class="radio" value="140">140px
　　　　</div>
　　　　<div class="div">
　　　　　　這是一種土方法，小時候常玩兒。背靠牆或椅背，以頭枕部向後頂牆，頭和身體不動，肌肉緊張收縮，後來聽人說這叫"繃勁兒」；或者雙手交叉放在頭枕部，雙手向前使勁兒，頭枕部向後使勁兒，相互對抗，頭頸不動。鍛鍊時，頸項部的肌肉持續緊張3?5秒，放鬆休息3?5秒爲1個週期。天天鍛鍊100?200次，分5-10組完成。
　　　　</div>

　　css:

　　　　* {
　　　　　　margin:0;
　　　　　　padding:0
　　　　}
　　　　html {
　　　　　　font-size:14px;
　　　　}
　　　　.div0 {
　　　　　　margin:30px;
　　　　}
　　　　.div {
　　　　　　width:300px;
　　　　　　height:50px;
　　　　　　line-height:24px;
　　　　　　border:1px solid #333;
　　　　　　margin:30px;
　　　　　　padding:5px;
　　　　}

　　js:

　　　　$(function(){
　　　　　　var div = $(".div");
　　　　　　var font_s = parseInt(div.css("font-size"));
　　　　　　var line_h = parseInt(div.css("line-height"));
　　　　　　var div_h = div.height();
　　　　　　var div_w = div.width();
　　　　　　var len = Math.floor(div_w/font_s);
　　　　　　var con = div.text();
　　　　　　var con2 = con;
　　　　　　var con_new = Math.floor(div_h/line_h);
　　　　　　con2 = con2.replace(con2.substring(len*(con_new-1)+6,con2.length),"...");//替換
　　　　　　div.text(con2)
　　　　　　$(".radio").click(function(){
　　　　　　$(this).attr("checked","checked").siblings().removeAttr("checked");
　　　　　　div.height(this.value);
　　　　　　div_h = div.height();
　　　　　　var con_new = Math.floor(div_h/line_h);
　　　　　　con3 = con.substring(0,len*(con_new-1)+6);//截取
　　　　　　div.text(con3 + "...")
　　　　})
　　})