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

  ?