摘要:一行時,超出長度的部分變?yōu)槭÷蕴栕⑼ㄟ^來控制字符串長度多行時,在第行超出的部分變?yōu)槭÷蕴栕⑼ㄟ^來控制你要在第幾行省略。默認編譯的時候,會被過濾,通過以上注釋的寫法才可生效,或者在項目中,在對應(yīng)需要加樣式的地方添加屬性也可生效
一行時,超出長度的部分變?yōu)槭÷蕴?/p>
.text-hidden { width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
注:通過width來控制字符串長度
多行時,在第n行超出的部分變?yōu)槭÷蕴?/p>
.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項目中,在對應(yīng)需要加樣式的地方添加style屬性:style={{WebkitBoxOrient: "vertical"}}也可生效
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/114238.html
摘要:前端代碼規(guī)范代碼編寫規(guī)范縮進每一層級由個空格組成,避免使用制表符進行縮進。單目運算符的操作數(shù)之間不應(yīng)該用空白隔開語句中的表達式之間應(yīng)當用空格隔開代碼編寫規(guī)范頭部文檔類型建議使用格式的。內(nèi)聯(lián)元素寫在一行內(nèi),塊狀元素還有列表和表格要另起一行。 前端代碼規(guī)范 JavaScript代碼編寫規(guī)范 縮進 每一層級由4個空格組成,避免使用制表符(Tab)進行縮進。 行的長度 每行長度不應(yīng)該超過80個...
摘要:函數(shù)的名字前綴為動詞,以此區(qū)分變量和函數(shù)示例函數(shù)命名命名方法小駝峰式命名法命名規(guī)范前綴應(yīng)當為動詞命名建議可使用常見動詞約定動詞含義返回值判斷是否可執(zhí)行某個動作權(quán)限函數(shù)返回一個布爾值。含有此值不含有此值判斷是否為某個值函數(shù)返回一個布爾值。CSS 規(guī)范 CSS 書寫規(guī)范 class類: 小寫字母,-分割; 圖片: 小寫字母,‘-’或者‘_’ 分...
摘要:一書寫規(guī)范縮進使用個空格做為一個縮進層級。盡量最多控制在級以內(nèi)。數(shù)值當數(shù)值為之間的小數(shù)時,省略整數(shù)部分的。長度長度為時須省略單位。二命名規(guī)范類名使用小寫字母,以中劃線分隔。采用駝峰式命名等中的變量函數(shù)混合采用駝峰式命名。 一、CSS 書寫規(guī)范 縮進 使用 4 個空格做為一個縮進層級。 .selector { margin: 0; padding: 0; } 空格 1.選...
摘要:系統(tǒng)性的介紹關(guān)于布局,也作為自學(xué)的一篇文章基礎(chǔ)理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個布局的頁面所具有的元素可分為類。每行第一個元素與行首對齊,每行最后一個元素與行尾對齊。 flex-tutorials 系統(tǒng)性的介紹關(guān)于flex布局,也作為自學(xué)的一篇文章 flex基礎(chǔ)理念 使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...
閱讀 1387·2021-11-15 18:11
閱讀 2515·2021-08-19 10:56
閱讀 683·2021-08-09 13:42
閱讀 799·2019-08-30 15:53
閱讀 2089·2019-08-30 10:55
閱讀 3149·2019-08-29 17:18
閱讀 1440·2019-08-29 13:45
閱讀 552·2019-08-29 13:15