前端踩坑之旅

amc 發(fā)布于2019-08-30 11:22 / 1833人閱讀

摘要：如果任一參數(shù)小于或是，它被視為為。如果是正的并且大于或等于字符串的長(zhǎng)度，則返回一個(gè)空字符串。若為負(fù)數(shù)則將該值加上字符串長(zhǎng)度后再進(jìn)行計(jì)算如果加上字符串的長(zhǎng)度后還是負(fù)數(shù)，則從開截取。如果為負(fù)，它被視為其中是字符串的長(zhǎng)度。

文本溢出處理

1. 單行文本溢出顯示省略號(hào)

overflow:hidden; （顧名思義超出限定的寬度就隱藏內(nèi)容）
white-space: nowrap; （設(shè)置文字在一行顯示不能換行）
text-overflow: ellipsis;（規(guī)定當(dāng)文本溢出時(shí)顯示省略符號(hào)來(lái)代表被修剪的文本）

2. 多行文本溢出顯示省略號(hào)

方法一（css）

-webkit-line-clamp:2; （用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù),2表示最多顯示2行。 為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性）

display: -webkit-box; （和1結(jié)合使用，將對(duì)象作為彈性伸縮盒子模型顯示 ）

-webkit-box-orient:vertical;（ 和1結(jié)合使用 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式

overflow:hidden; （顧名思義超出限定的寬度就隱藏內(nèi)容）

text-overflow: ellipsis;（規(guī)定當(dāng)文本溢出時(shí)顯示省略符號(hào)來(lái)代表被修剪的文本）

方法二（js）

  數(shù)據(jù)獲取時(shí)：預(yù)估字符，過(guò)長(zhǎng)后截取字符串并手動(dòng)加上“...”
  slice()、substring()、substr()都有截取字符串的作用
  
  
  （1）str.substring(indexStart, [indexEnd])
  
   注：substring()從提取的字符indexStart可達(dá)但不包括 indexEnd
     如果indexStart 等于indexEnd，substring()返回一個(gè)空字符串。
     如果indexEnd省略，則將substring()字符提取到字符串的末尾。
     如果任一參數(shù)小于0或是NaN，它被視為為0。
     如果任何一個(gè)參數(shù)都大于stringName.length，則被視為是stringName.length。
     如果indexStart大于indexEnd，那么效果substring()就好像這兩個(gè)論點(diǎn)被交換了一樣； 例如
     str.substring(1, 0) == str.substring(0, 1)
     
     
  （2）str.substr(start, [length])
  
   注：substr()會(huì)從start獲取長(zhǎng)度為length字符（如果截取到字符串的末尾，則會(huì)停止截取）。
     如果start是正的并且大于或等于字符串的長(zhǎng)度，則substr()返回一個(gè)空字符串。
     若start為負(fù)數(shù),則將該值加上字符串長(zhǎng)度后再進(jìn)行計(jì)算（如果加上字符串的長(zhǎng)度后還是負(fù)數(shù)，則從0開截取）。
     如果length為0或?yàn)樨?fù)數(shù)，substr()返回一個(gè)空字符串。如果length省略，則將substr()字符提取到字符串的末尾。
     
    （3）str.slice(beginIndex[, endIndex])
    
     注：若beginIndex為負(fù)數(shù),則將該值加上字符串長(zhǎng)度后再進(jìn)行計(jì)算（如果加上字符串的長(zhǎng)度后還是負(fù)數(shù)，則從0開始截取）。
        如果beginIndex大于或等于字符串的長(zhǎng)度，則slice()返回一個(gè)空字符串。
        如果endIndex省略，則將slice()字符提取到字符串的末尾。如果為負(fù)，它被視為strLength + endIndex其中strLength是字符串的長(zhǎng)度。

坑點(diǎn)

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