多行文本省略解决办法 纯css

目前单行文本省略的通用办法

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

多行文本可以尝试采用以下方法，点击这里可以查看效果
如下图所示： 绿色部分是我们的文本域，在它的左侧，设置一个红色区域作为标尺域，紫色部分是我们的监测域，区域划分完毕，接下来我们说一下这个方法的实现原理，以及每部分的代码设定。

css中有一个float，这个大家都不陌生。flex布局未出现之前，为保证页面的健壮性，在主体布局中尽量避免float，其中一个原因就是如果是全浮动布局，当某个列表宽高发生变化，很有可能导致整个页面结构错乱。但在这里，可以利用float的这个特性，让布局向我们预设的方向“错乱”。
html代码

<div class="wrapper wrapper1">
    <i>float:left</i>
    <p>这里是文字，这句话会很长很长，它会长到整个文本框都包不住的地步。</p>
    <span>float:right</span>
</div>

这是我们的结构部分，其中div是我们设定的文字区，i为标尺域，p为文本域，span为监测域
标尺域：高度与盒子本省相等，左浮动
文本域：右浮动
监测域：右浮动，在其伪元素after上加入省略号，绝对定位于监测域

当文本域内容高度小于标尺域时，监测域位于文本域右下角，省略号此时位于div右侧外部不显示。

当文本域内容高度等于标尺域时，监测域位置同上。

当文本域内容增加到临界值时，由于浮动的关系，监测域会被挤到标尺域下方，这时，基于监测域定位的省略号刚好可以覆盖在文本域末端位置

相关细节部分

为保证能够完美覆盖，特设定以下属性关系
1、标尺域、监测域、以及监测域伪元素宽度与文本域字号一致
2、监测域伪元素定位，left值等于外部框子宽度减去字号宽度，top值等于负的文本域行高
3，文本域水平对齐方式为两端对齐
核心css

.wrapper{
          width:500px;
          margin:10px auto;
          max-height: 180px;
          line-height: 36px;
          overflow: hidden;
          box-shadow: 0 0 4px 0 rgb(0,0,0);
      }
      i{
          float:left;
          width: 100px;
          background: rgba(255,0,0,.3);
          height:180px;
      }
      p{
          float:right;width: 400px;
          background:rgba(0,255,0,.3);
          margin: 0;
          position: relative;
          font-size: 16px;
          text-align: justify;
      }
      span{
          float: right;
          width:100px;
          height:36px;
          background:rgba(0,0,255,.3);
          position: relative;
      }
      span:after{
          content: '...';
          position: absolute;
          top: -36px; 
          width:16px; 
          left:484px;
          text-align: center;
          background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%)
      }