前端单行或多行文本显示，溢出文本显示省略号，兼容IE多行溢出隐藏

超、凢脫俗 2023-06-09 04:55 36阅读 0赞

### 文本单行显示,溢出的显示省略号 ###

*  对于一个 **单行** 文本标签，超出隐藏,只需要将标签设置一个定width，再加上 **overflow: hidden;** 属性即可。
 *  如果想超出的部分以省略号显示， 再加上 **text-overflow:ellipsis;white-space: nowrap;** 属性。

{ 
    	 overflow: hidden;
    	 text-overflow:ellipsis;
    	 white-space: nowrap;
    	}

### 多行文本显示，溢出的显示省略号 ###

{ 
    	 overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 2;    （希望显示N行-webkit-line-clamp的变为N）
         -webkit-box-orient: vertical;
    	}

\*但是上面的方法不兼容 IE \*

#### 兼容IE 多行文本显示，溢出的显示省略号 ####

HTML代码
    	<p>
           阿伟已经死了，你跳的嘛，偶像，段坤我吃定了，耶稣也留不住他，我说的！阿伟已经死了，你跳的嘛，偶像，段坤我吃定了，耶稣也留不住他，我说的！
       </p>

css代码 p { 
          padding: 0 10px;
          line-height: 24px;
          font-size: 12px;
          color: #333333;
          background-color: #ff4200;
          text-align: center;
          width: 134px;
          height: 48px;
          overflow: hidden;
          position: relative;
        }
    
        p:after { 
          content: "...";
          position: absolute;
          bottom: 0;
          right: 0;
          background: #FFF;
          padding-left: 10px;
        }

![ie 上的效果图][ie]  
*上面的事例是省略号一直存在，如果p标签是动态传值，有时文本比较短的文本，也存在省略号，故不理想。*

#### 兼容IE js放法 多行文本显示，溢出的显示省略号 ####

###### 思路：对标签的文本的长度进行判断，如果长度过超过了设置多行宽度可接受的最大宽度，对文本进行截取，再添加上省略号后，渲染到到页面中。 ######

HTML 代码
     	<div id="box">
         	 阿伟已经死了，你跳的嘛，偶像，段坤我吃定了，耶稣也留不住他，我说的！阿伟已经死了，你跳的嘛，偶像，段坤我吃定了，耶稣也留不住他，我说的！
         <div>

css代码 #{ 
    	width: 100px;
        height: 40px;
        line-height: 20px;
    	}

$(function () { 
          var content_arr = [];                              //定义一个空数组
          $('#box').each(function () {                        //遍历box内容
            var content = $.trim($(this).text());            //去掉前后文空格
            content_arr.push(content);                       //内容放进数组
          })
          for (var i = 0; i < content_arr.length; i++) {      //遍历循环数组
            if (content_arr[i].length >= 35) {                // 判断文本长度是否大于预设长度
              content = content_arr[i].substr(0, 35) + '...';     //添加省略号并放进box文字内容后面
              $("#box").eq(i).text(content);
            } else { 
              content = content_arr[i];
              $("#box").eq(i).text(content);
            }
          }
        })

![js效果][js]

### 文本多行显示,在非IE,溢出的显示省略号,溢出隐藏 强推 ###

HTML
    <div>    
         <span>
    	     <em style="font-weight: bolder">简介：</em>2019 张韶涵「寓言」世界巡回演唱会-南京站,当她在逆风中  修炼出盔甲，她是所有人心中的女王，而现在，她在盔甲的庇护中沉淀出平静与温暖的力量，在最懂体会的当下，不再只接纳想要的纯粹，而是这一路的五彩斑斓，都将融合幻化为全新的张韶涵。2019 张韶涵「寓言」世界巡回演唱会-成都站，敬请期待！
    	</span>
    </div>

div{ 
    	margin-top: 15px;
    	font-size: 12px;
    	color: #777777;
    	line-height: 22px;
    	max-height: 66px;
    	overflow: hidden;
    }
    div span{ 
    	overflow: hidden;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 3;
    	-webkit-box-orient: vertical;
    }

##### 在火狐浏览器上的效果 #####

![非IE效果][IE]

##### 在IE浏览器上的效果 #####

![IE浏览器上的效果][IE 1]  
*在父标签上，需要设置 ine-height:x; max-height:nx; overflow: hidden; 三个属性，可以尽量的保持渲染效果的美观*

[ie]: /images/20230531/85ebdd361ee34e3eba5c31070014188c.png
[js]: /images/20230531/8277269443b1424d9e9ee8cd981c456a.png
[IE]: /images/20230531/eba05acfebb24967b4f7a01664f18c8c.png
[IE 1]: /images/20230531/b1c10f4ede244c6e966efd98cec155ea.png