根据容器的高度进行截取字符的长度

Posted 2020-09-17

　　在实际工作中，很多时候都会有几行几行之后显示省略号的需求，都知道单行省略号的需求很简单，三个属性就实现了(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 + "...")
　　　　})
　　})