兼容IE文本控制兩行,多余省略,親測有效
阿新 • • 發佈:2018-03-08
con ons bre wid mar abs lamp 技術分享 vertica
正常情況下,都會使用 -webkit-line-clamp:2;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/
-webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 顯示的行數 **/
overflow: hidden;
但是不兼容IE瀏覽器,所以我們可以這樣做:
width: 225px;
height:50px;
overflow: hidden; /*設置一個高度,溢出隱藏*/
接著添加一個偽類元素:
.fh5co-copy>p:after {
content:"...";
position:absolute;
bottom:45px;
right:34px;
background:#FFF;
padding-left:0.2em;
}
大功告成
兼容IE文本控制兩行,多余省略,親測有效