单行/多行文本溢出的省略样式

0.背景

在日常开发过程中，常常会遇到大量文本信息展示的问题，如何进行合适的布局使得页面更加美观，成为一个问题。

对于文本溢出可采用两种形式：

• 单行文本溢出
• 多行文本溢出

1.单行文本溢出

简单来说就是：文本在一行内显示，超出部分以省略号的形式进行展示。

实现方式

<p>
  这是很长一段文字信息，需要进行文本溢出展示。这是很长一段文字信息，需要进行文本溢出展示。这是很长一段文字信息，需要进行文本溢出展示。
  这是很长一段文字信息，需要进行文本溢出展示。这是很长一段文字信息，需要进行文本溢出展示。这是很长一段文字信息，需要进行文本溢出展示。
  这是很长一段文字信息，需要进行文本溢出展示。这是很长一段文字信息，需要进行文本溢出展示。这是很长一段文字信息，需要进行文本溢出展示。
  这是很长一段文字信息，需要进行文本溢出展示。这是很长一段文字信息，需要进行文本溢出展示。
</p>

p{
  overflow:hidden;
  line-height:40px;
  width:400px;
  height:40px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

展示效果

涉及的css属性有：

text-overflow: 规定当文本溢出时，显示省略符号来代表被修剪的文本

white-space: 设置文字在一行显示，不能换行

overflow: 文本长度超出限定宽度，则隐藏超出内容

 

overflow 设为  hidden 普通情况用在块级元素的外层隐藏内部溢出元素，或者配合以下两个属性实现文本溢出

 

 white-space:nowrap,作用是设置文本不换行，要在  overflow:hidden;   text-overflow:ellipsis; 生效的基础上才可生效

text-overflow 属性值如下：

clip：对象内文本溢出时，裁掉溢出部分

ellipsis：对象内文本溢出时，显示省略号(...)

text-overflow 只有在设置了overflow:hidden  和  white-space:nowrap  才能生效

2.多行文本溢出

 多行文本溢出时，存在两种解决方案：

• 基于高度截断
• 基于行数截断

 2.1基于高度截断

<p class="demo">
  这是很长一段文字信息，需要进行文本溢出展示。这是很长一段文字信息，需要进行文本溢出展示。这是很长一段文字信息，需要进行文本溢出展示。这是很长一段文字信息，
</p>

.demo{
  position:relative;
  line-height:20px;
  height:40px;
  overflow:hidden;
}
.demo::after{
  content:"...";
  position:absolute;
  bottom:0;
  right:0;
  word-break:break-all;
}

 

展示效果

 

实现原理是通过伪元素绝对定位到行尾并遮住文字，再通过  overflow:hidden;  隐藏多余文字

这种实现方式的优点：

兼容性好：适应各大主流浏览器

响应式截断：根据宽度做出调整

一般文本存在英文的时候，可以设置  word-break: break-all 使一个单词能够在换行时进行拆分

 2.2基于行数截断

<p>
  这是很长一段文字信息，需要进行文本溢出展示。这是很长一段文字信息，需要进行文本溢出展示。这是很长一段文字信息，需要进行文本溢出展示。这是很长一段文字信息，需要进行文本溢出展示。
</p>

 p {
      width: 400px;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

 

核心css代码：

• -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性
• display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
• -webkit-box-orient: vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
• overflow: hidden：文本溢出限定的宽度就隐藏内容
• text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本

可以看到，上述使用了webkit的CSS属性扩展，所以兼容浏览器范围是PC端的webkit内核的浏览器，由于移动端大多数是使用webkit，所以移动端常用该形式

需要注意的是，如果文本为一段很长的英文或者数字，则需要添加  word-wrap: break-word 属性

 

**使用JS配合css实现**

css结构如下：

p {
    position: relative;
    width: 400px;
    line-height: 20px;
    overflow: hidden;

}
.p-after:after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -moz-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(left, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

javascript代码如下：

$(function(){
 //获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
   $('p').each(function(i, obj){
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        if((height / lineHeight) >3 ){
            $(this).addClass("p-after")
            $(this).css("height","60px");
        }else{
            $(this).removeClass("p-after");
        }
    });
})