P多行溢出省略号的处理

• 因为-webkit-line-clamp: 2不兼容火狐或IE，采用判断浏览器的方式来启用哪个方式
• 先判断是什么浏览器

  //判断是否是谷歌浏览器
  if (!stripos($_SERVER["HTTP_USER_AGENT"], 'chrome')) {
      $this->registerCssFile('@web/css/view.css');
  }

   

• 行内样式（若为谷歌浏览器）

  <p class="content-style" style="white-space: pre-line;white-space: -moz-pre-wrap; 
   white-space: -pre-line;  white-space: -o-pre-line;word-wrap: break-word; text-overflow: ellipsis; 
  -webkit-line-clamp: 2; word-break: break-all; display: -webkit-box;-webkit-box-orient: vertical;"  title="需要展示的数据">
          需要展示的数据
  </p>

   

• 创建一个view.css

  .content-style {
      width: 100%;
      height: 40px;
      line-height: 20px;
      position: relative;
      /*多行文本省略*/
      overflow: hidden;
      text-overflow: ellipsis;
      display: -moz-box;
      -moz-line-clamp: 2 !important;
      -moz-box-orient: vertical;
      white-space: pre-wrap;
      /*! autoprefixer: off */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .content-style:after {
      background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 25%) repeat scroll 0 0 rgba(0, 0, 0, 0);
      bottom: 0;
      content: "...";
      padding: 0px 5px 1px 10px;
      position: absolute;
      right: 0;
  }