css实现多行省略

使用伪类实现

<div class="wrap">
  <p class="text" title="人生是围城，婚姻是围城。克莱登大学哲学博士方鸿渐留学回国了。他是个没有用的人，在欧洲四年，转了三个学校，改了几回专业，生活散漫，学无所成。未婚妻和方鸿渐从未见过面，就撒手人寰。他蒙岳父大人资助得以负笈欧洲，所以回国后，先看望了岳父岳母，这才回到家乡见爹娘。方鸿渐不喜欢这些土里土气又打扮时髦的女孩们，爱情在他心中仍一是一片空白的领域。春暖花开的时候，方鸿渐拜访了和自己一起留学归来的女博士苏文纨。在苏文纨家，他结识了苏的表妹唐晓芙。她是个天真、直爽的大学生。方鸿渐对唐晓芙一见倾心，堕入了情网，可是苏文纨喜欢方鸿渐。方鸿渐不喜欢苏文纨的做作，但是他总不能狠下心来拒绝，怕伤害了苏小姐。。。。。。">
    人生是围城，婚姻是围城。克莱登大学哲学博士方鸿渐留学回国了。他是个没有用的人，在欧洲四年，转了三个学校，改了几回专业，生活散漫，学无所成。未婚妻和方鸿渐从未见过面，就撒手人寰。他蒙岳父大人资助得以负笈欧洲，所以回国后，先看望了岳父岳母，这才回到家乡见爹娘。方鸿渐不喜欢这些土里土气又打扮时髦的女孩们，爱情在他心中仍一是一片空白的领域。春暖花开的时候，方鸿渐拜访了和自己一起留学归来的女博士苏文纨。在苏文纨家，他结识了苏的表妹唐晓芙。她是个天真、直爽的大学生。方鸿渐对唐晓芙一见倾心，堕入了情网，可是苏文纨喜欢方鸿渐。方鸿渐不喜欢苏文纨的做作，但是他总不能狠下心来拒绝，怕伤害了苏小姐。。。。。。
  </p>
  <div>查看全文</div>
</div>

.wrap{
  margin: 50px auto;
  width: 500px;
  overflow: hidden;
  resize: horizontal;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #ebebeb;
  position: relative;
  p.text{
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 7; // 多行超出省略
    -webkit-box-orient: vertical; // 指定box子元素是否按水平或垂直排列
    text-align: justify; // 文本两端对齐
    &::after{
      content: '';
      position: absolute;
      display: block;
      width: 100px;
      height: 20px;
      background-color: red;
    }
  }
}

实现效果

• 红色区域是为了更明显的看出到底是什么元素隐藏了“查看全文”
• 当缩小显示框时，红色区域看不见了，是因为显示框很小时，假如此时文本变成了10行显示，因为红色区域是根据容器绝对定位的，如果不写top 等方向距离就会定在它本该的位置，而我们是7行就会显示省略，下面的三行虽然被省略，但是高度还在，因为红色区域就被挤到第11行也就看不见了
• 当显示8行时候我们就会看见第8行被隐藏，红色区域就会显示在第9行，也就是“查看全文”下面
• 当显示7行时，此时红色区域就会在第8行，也就把“查看全文”遮住了

问题

看动图可以看出，当超出指定行时没什么太大问题，但是，当不满足省略条件时，下面会多出一个高度，这是因为“查看全文”其实一直都在，只是视觉上被我们遮挡住了而已。这显然是有问题的。

优化

其实我们要解决的就是多余的那个“查看全文”块

.wrap{
  margin: 50px auto;
  width: 500px;
  overflow: hidden;
  resize: horizontal;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #ebebeb;
  position: relative;
  p.text{
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 7; // 多行超出省略
    -webkit-box-orient: vertical; // 指定box子元素是否按水平或垂直排列
    text-align: justify; // 文本两端对齐
    background-color: inherit;
    line-height: 1.5;
    &::before{
      content: attr(title);
      position: absolute;
      left: 12px;
      right: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 7; // 多行超出省略
      -webkit-box-orient: vertical; // 指定box子元素是否按水平或垂直排列
      text-align: justify; // 文本两端对齐
      background-color: red;
      line-height: 1.5;
    }
    &::after{
      transition: 1s;
      content: '';
      display: block;
      height: 0;
      margin-top: -20px;
    }
  }
}

效果图

• 红色区域是 before 创建的伪元素内容，用来覆盖原来的元素
• 内容不超出时，after元素的margin-top负数，会使得后面的内容“查看全文”向上走一行，从而整体都被上面的before内容遮住也就看不到“查看全文”了
• 内容超出时，因为元素的伪元素会被置于这个元素的内容的前后，而不是这个元素的前后，所以after会被当作超出内容直接被省略，不会影响“查看全文”的位置

内容不超出：

内容超出时：

margin负数

这里有个疑问，为什么未超出时 margin-top 负数，会将“查看全文”带上去顶替 p 元素的最后一行，为什么“查看全文”不是紧接着 p 文本的最后一行而是将其挤掉了
因为 margin-top 负数就是希望将其紧跟着元素推上来