• 因為-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; }

  ?

轉載于:https://www.cnblogs.com/fatRabbit-/p/11039597.html

總結

以上是生活随笔為你收集整理的P多行溢出省略号的处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。