- 因为-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