CSS中单行、多行溢出处理（考虑兼容问题）

单行溢出的处理比较简单，两三行css代码即可实现：

.box {
    width: 300px;
    overflow: hidden;//溢出部分隐藏
    white-space: nowrap;//不换行
    text-overflow: ellipsis;//添加省略号
    border: 2px solid black;
  }

上面的样式实现效果如下：

单行溢出

 多行溢出的情况：

首先是webkit内核（移动端浏览器多数是webkit内核）的浏览器的实现方式：

.box {
    width: 300px;
    overflow: hidden;
    display: -webkit-box;//设置块元素为伸缩布局
    -webkit-box-orient: vertical;//设置伸缩项的布局方向
    -webkit-line-clamp: 2;设置文本行数
    border: 2px solid black;

  }

这种方式就是缺乏兼容性。

下面是兼容性的方式 ：

<style>
    .box {
      height: 160px;
      width: 1000px;
      border: 2px solid black;
      overflow: hidden;
    }

    .box .hh {
      content: '';
      display: block;
      height: 140px;
    }

    .content {
      line-height: 20px;
      margin-top: -140px;
    }

    .box .more {
      float: right;
      line-height: 1;
      margin-right: 1em;
    }
  </style>
<div class="box">
    <div class="hh"></div>
    <div class="more">...</div>
    <div class="content">
      多行溢出，考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容
    </div>
  </div>

上面的只是实现了样式的省略，当字数达不到省略的字数时，“...”隐藏的实现，需要通过js来实现。