CSS: 通過CSS控制字符串長度（一行或者多行）

Terry_Tai 發布于2019-08-29 17:18 / 3136人閱讀

摘要：一行時，超出長度的部分變為省略號注通過來控制字符串長度多行時，在第行超出的部分變為省略號注通過來控制你要在第幾行省略。默認編譯的時候，會被過濾，通過以上注釋的寫法才可生效，或者在項目中，在對應需要加樣式的地方添加屬性也可生效

一行時，超出長度的部分變為省略號

.text-hidden {
  width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

注：通過width來控制字符串長度

多行時，在第n行超出的部分變為省略號

.text-ellipsis {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

注：通過-webkit-line-clamp來控制你要在第幾行省略。默認編譯的時候，-webkit-box-orient: vertical;會被過濾，通過以上注釋的寫法才可生效，或者在react項目中，在對應需要加樣式的地方添加style屬性：style={{WebkitBoxOrient: "vertical"}}也可生效

GPU云服務器云服務器通過CSS 多行合成一行多行轉一行多行數據輸出為一行

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

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

前端代碼編寫規范

摘要：前端代碼規范代碼編寫規范縮進每一層級由個空格組成，避免使用制表符進行縮進。單目運算符的操作數之間不應該用空白隔開語句中的表達式之間應當用空格隔開代碼編寫規范頭部文檔類型建議使用格式的。內聯元素寫在一行內，塊狀元素還有列表和表格要另起一行。前端代碼規范 JavaScript代碼編寫規范縮進每一層級由4個空格組成，避免使用制表符（Tab）進行縮進。行的長度每行長度不應該超過80個...

liangdas 2019-08-23 11:49 評論0 收藏0
團隊合作前端書寫習慣總結

摘要：函數的名字前綴為動詞，以此區分變量和函數示例函數命名命名方法小駝峰式命名法命名規范前綴應當為動詞命名建議可使用常見動詞約定動詞含義返回值判斷是否可執行某個動作權限函數返回一個布爾值。含有此值不含有此值判斷是否為某個值函數返回一個布爾值。CSS 規范 CSS 書寫規范 class類：小寫字母,-分割；圖片: 小寫字母，‘-’或者‘_’ 分...

番茄西紅柿 2019-04-23 13:17 評論0 收藏0
CSS 編碼規范

摘要：一書寫規范縮進使用個空格做為一個縮進層級。盡量最多控制在級以內。數值當數值為之間的小數時，省略整數部分的。長度長度為時須省略單位。二命名規范類名使用小寫字母，以中劃線分隔。采用駝峰式命名等中的變量函數混合采用駝峰式命名。一、CSS 書寫規范縮進使用 4 個空格做為一個縮進層級。 .selector { margin: 0; padding: 0; } 空格 1.選...

AbnerMing 2019-08-29 17:27 評論0 收藏0
flex基礎布局詳解

摘要：系統性的介紹關于布局，也作為自學的一篇文章基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個布局的頁面所具有的元素可分為類。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。 flex-tutorials 系統性的介紹關于flex布局，也作為自學的一篇文章 flex基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

nemo 2019-08-30 15:53 評論0 收藏0