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

   

转载于:https://www.cnblogs.com/fatRabbit-/p/11039597.html

总结

以上是生活随笔为你收集整理的P多行溢出省略号的处理的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。