單行文本省略

在html+css中，當咱們遇到諸如商品詳情的標題的輸入時，咱們會須要使用到：

單行文本溢出省略

核心css語句：

一、overflow:hidden;  （顧名思義超出限定的寬度就隱藏內容）

二、white-space: nowrap; （設置文字在一行顯示不能換行）

三、text-overflow: ellipsis;（規定當文本溢出時顯示省略符號來表明被修剪的文本）

多行文本溢出省略

核心css語句：

一、-webkit-line-clamp:2; （用來限制在一個塊元素顯示的文本的行數,2表示最多顯示2行。 爲了實現該效果，它須要組合其餘的WebKit屬性）

二、display: -webkit-box; （和1結合使用，將對象做爲彈性伸縮盒子模型顯示 ）

三、-webkit-box-orient:vertical;（ 和1結合使用 ，設置或檢索伸縮盒對象的子元素的排列方式 。）

四、overflow:hidden;  （顧名思義超出限定的寬度就隱藏內容）

五、text-overflow: ellipsis;（規定當文本溢出時顯示省略符號來表明被修剪的文本）

 

當編寫小程序時，當咱們遇到單行文本溢出時，和html+css編輯同樣：

可是，不能爲flex佈局，當佈局爲flex佈局時，文本溢出無效

佈局應爲

　　display:inline-flex