成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Terry_Tai / 3148人閱讀

摘要:一行時,超出長度的部分變?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ān)文章

  • 前端代碼編寫規(guī)范

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

    liangdas 評論0 收藏0
  • 團隊合作前端書寫習慣總結(jié)

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

    番茄西紅柿 評論0 收藏0
  • CSS 編碼規(guī)范

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

    AbnerMing 評論0 收藏0
  • flex基礎(chǔ)布局詳解

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

    nemo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<