图文样式

line-height如何继承

写具体数值，如30px，则继承该值（比较好理解)
写比例，1.5 ，则继承该比例（比较好理解)(实际值 = 16px * 1.5)
写百分比，如200%，则继承计算出来的值（考点)(继承值 = 16px * 200%)

文本溢出省略

文本溢出-示例

单行省略

div.elli {
  border: 1px solid;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*强制在一行显示*/
  text-overflow: ellipsis; /*超出部分已省略展示*/
  width: 200px;
  height: 20px;
}

多行省略

<div class="mutil-line-ellipsis">
  <div>CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）</div>
</div>
<style>
      /* 多行 省略 测试 */
    .mutil-line-ellipsis {
      border: 1px solid #dfdfdf;
      /* 增加行高调整高度 一 */
      height: 40px; 
      width: 400px;
      line-height: 20px;
      overflow: hidden;
    }

    .mutil-line-ellipsis:before {
      content: '';
      float: left;
      /*缩小宽度为5px，其余属性不变*/
      width: 5px;
      /* 增加行高调整高度 二 */
      height: 40px;
    }

    .mutil-line-ellipsis> :first-child {
      float: right;
      width: 100%;
      margin-left: -5px;
      /*让main元素左移5px，这样main元素在宽度上就完全占满了父元素；*/
      word-break: break-all;

      padding-right: 10px;
      box-sizing: border-box;
      text-align: justify;

    }

    .mutil-line-ellipsis:after {
      content: '...';
      box-sizing: content-box;
      float: right;
      position: relative;
      width: 11px;
      height: 20px;
      top: -20px;
      /*等于高度的负值，就是文字的行高*/
      left: 100%;
      /*设置margin-left。padding-right。则是为了让realend元素的盒模型的最终宽度计算为5px。*/
      margin-left: -11px;
      padding-right: 5px;
      font-size: 13px;
      text-align: left;
      background: #fff;
      /* W3C */
    }
</style>

思路：浮动 + 定位 + 盒模型宽度 + 伪元素