文本溢出我們經(jīng)常用到的應(yīng)該就是text-overflow:ellipsis了，相信大家也很熟悉奢讨，但是對于多行文本的溢出處理確接觸的不是很多稚叹，最近用weex做東西，遇到了文本溢出樣式的問題拿诸，總結(jié)下
1.實現(xiàn)單行縮略是可以通過下面的代碼實現(xiàn)的（部分瀏覽器需要設(shè)置寬度）：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
2.WebKit內(nèi)核瀏覽器解決辦法
首先扒袖，WebKit內(nèi)核的瀏覽器實現(xiàn)起來比較簡單，可以通過添加一個-webkit-line-clamp的私有屬性來實現(xiàn)佳镜，-webkit-line-clamp是用來限制在一個塊元素顯示的文本的行數(shù)僚稿。 為了實現(xiàn)這個效果，它需要組合其他的WebKit屬性：
- display: -webkit-box 將對象作為彈性伸縮盒子模型顯示蟀伸；
- -webkit-box-orient 設(shè)置或檢索伸縮盒對象的子元素的排列方式蚀同；
- text-overflow: ellipsis 用省略號“…”隱藏超出范圍的文本。
具體代碼參考如下：
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //兩行
-webkit-box-orient: vertical;
3.weex 下
<text>是Weex內(nèi)置的組件啊掏，用來將文本按照指定的樣式呈染出來蠢络。<text>只能包含文本值，你可以使用{{}}標(biāo)記插入變量值作為文本內(nèi)容迟蜜，不支持子組件
樣式：
lines{number}指定文本行數(shù)刹孔。默認(rèn)值是0 代表不限制行數(shù)。
項目中應(yīng)用實例如下：
.limit-one{
lines: 1;
text-overflow: ellipsis;
flex: 1;
}
.limit-two{
lines: 2;
text-overflow: ellipsis;
}
.limit-three{
lines: 3;
text-overflow: ellipsis;
}
.unlimit{
lines: 0;
text-overflow: ellipsis;
}
另根據(jù)需要設(shè)置寬度娜睛。
