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;
  }