前端踩坑之旅

Flands 發布于2019-08-23 18:38 / 3568人閱讀

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

文本溢出處理

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

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

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

方法一（css）

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

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

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

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

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

方法二（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是字符串的長度。

坑點

設置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 子元素水平方向的對其方式

GPU云服務器云服務器學習之旅初踩坑類踩坑必踩坑

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105575.html

前端踩坑之旅

摘要：如果任一參數小于或是，它被視為為。如果是正的并且大于或等于字符串的長度，則返回一個空字符串。若為負數則將該值加上字符串長度后再進行計算如果加上字符串的長度后還是負數，則從開截取。如果為負，它被視為其中是字符串的長度。文本溢出處理 1. 單行文本溢出顯示省略號 overflow:hidden; （顧名思義超出限定的寬度就隱藏內容） white-space: nowrap; （設置文字在...

W4n9Hu1 2019-08-02 15:31 評論0 收藏0
前端踩坑之旅

摘要：如果任一參數小于或是，它被視為為。如果是正的并且大于或等于字符串的長度，則返回一個空字符串。若為負數則將該值加上字符串長度后再進行計算如果加上字符串的長度后還是負數，則從開截取。如果為負，它被視為其中是字符串的長度。文本溢出處理 1. 單行文本溢出顯示省略號 overflow:hidden; （顧名思義超出限定的寬度就隱藏內容） white-space: nowrap; （設置文字在...

amc 2019-08-30 11:22 評論0 收藏0
記一次小程序之旅

摘要：用戶綁定的邏輯主要復雜在既需要考慮微信本身的接口在不同情況下提供的數據不同，另外一方面就是考慮本身用戶模塊的業務邏輯問題。針對每一節課以及每一節系列課程生成小程序太陽碼主要涉及到幾個細節問題。感覺已經好久沒寫程序了，最近這段時間，一方面是學習了python，然后折騰了scrapy框架，用python寫了下守護進程程序監聽任務以及用redis做隊列任務通信，并開進程來處理爬蟲任務。以上...

不知名網友 2019-07-01 10:31 評論0 收藏0
handlebars踩坑之旅

摘要：的使用方法遍歷數組或者對象刀歌云數組遍歷時索引值為對象為判斷是否有傳參有的話使用傳參的值沒有的話使用默認值判斷對應適用數據數據取出錯誤這里判斷是否存在數組，如果存在則遍歷，如果不存在輸出錯誤信息判斷是否是第一個或者是 1. each的使用方法(遍歷數組或者對象) {{include tpl/components/page3-school-slide/each-slide ...

cjie 2019-08-22 13:59 評論0 收藏0
weex踩坑之旅第二彈 ~ 在weex中集成vue-router

摘要：也就是說在中，我們的代碼是要在環境中運行。而在中，是沒有等以及的，即所有的框架都是不可以使用的。比如相關組件，相關組件，等都不能在中引用。是可以在中使用的。接著第一彈講，我們已經搭建好一個屬于自己的weex項目了，然后如何開發呢？由于之前項目中都是采用vue全家桶進行開發，路由使用vue-router插件，狀態管理使用vuex，Ajax前后臺交互使用axios，圖標庫使用font-a...

tyheist 2019-08-21 18:25 評論0 收藏0