前端踩坑之旅

文本溢出處理

1. 單行文本溢出顯示省略號

overflow:hidden; （顧名思義超出限定的寬度就隱藏內容）
white-space: nowrap; （設置文字在一行顯示不能換行）
text-overflow: ellipsis;（規定當文本溢出時顯示省略符號來表明被修剪的文本）

2. 多行文本溢出顯示省略號

1. 方法一（css）

   -webkit-line-clamp:2; （用來限制在一個塊元素顯示的文本的行數,2表示最多顯示2行。 爲了實現該效果，它須要組合其餘的WebKit屬性）
   
   display: -webkit-box; （和1結合使用，將對象做爲彈性伸縮盒子模型顯示 ）
   
   -webkit-box-orient:vertical;（ 和1結合使用 ，設置或檢索伸縮盒對象的子元素的排列方式
   
   overflow:hidden; （顧名思義超出限定的寬度就隱藏內容）
   
   text-overflow: ellipsis;（規定當文本溢出時顯示省略符號來表明被修剪的文本）

2. 方法二（js）

   數據獲取時：預估字符，過長後截取字符串並手動加上「...」
     slice()、substring()、substr()都有截取字符串的做用
     
     
     （1）str.substring(indexStart, [indexEnd])
     
      注：substring()從提取的字符indexStart可達但不包括 indexEnd
        若是indexStart 等於indexEnd，substring()返回一個空字符串。
        若是indexEnd省略，則將substring()字符提取到字符串的末尾。
        若是任一參數小於0或是NaN，它被視爲爲0。
        若是任何一個參數都大於stringName.length，則被視爲是stringName.length。
        若是indexStart大於indexEnd，那麼效果substring()就好像這兩個論點被交換了同樣； 例如
        str.substring(1, 0) == str.substring(0, 1)
        
        
     （2）str.substr(start, [length])
     
      注：substr()會從start獲取長度爲length字符（若是截取到字符串的末尾，則會中止截取）。
        若是start是正的而且大於或等於字符串的長度，則substr()返回一個空字符串。
        若start爲負數,則將該值加上字符串長度後再進行計算（若是加上字符串的長度後仍是負數，則從0開截取）。
        若是length爲0或爲負數，substr()返回一個空字符串。若是length省略，則將substr()字符提取到字符串的末尾。
        
       （3）str.slice(beginIndex[, endIndex])
       
        注：若beginIndex爲負數,則將該值加上字符串長度後再進行計算（若是加上字符串的長度後仍是負數，則從0開始截取）。
           若是beginIndex大於或等於字符串的長度，則slice()返回一個空字符串。
           若是endIndex省略，則將slice()字符提取到字符串的末尾。若是爲負，它被視爲strLength + endIndex其中strLength是字符串的長度。

坑點

1. 設置display: -webkit-box;後文本屬性部分失效 例如： text-align: center
   webkit-box屬性 -webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit，其中默認值是inline-axis，即橫向排列 -webkit-box-flex 子元素之間比例，僅做一個係數 -webkit-box-direction 子元素排列順序 normal | reverse | inherit，其中默認值是normal -webkit-box-flex-group 以組爲單位的流體系數 -webkit-box-ordinal-group 以組爲單位的子元素排列方向 -webkit-box-lines 子元素是否換行，相似word-wrap和word-break的做用 -webkit-box-align 子元素垂直方向的對其方式 -webkit-box-pack 子元素水平方向的對其方式