CSS--text-overflow使用注意

  • 設(shè)置在塊元素上。

  • text-overflow有兩個屬性值,clip和ellipsis。clip 表示不顯示省略標記(…),而是簡單的裁切;ellipsis代表當對象內(nèi)文本溢出時顯示省略標記(…)

  • 要想這兩個屬性起真正的作用,需要配合overflow:hidden;white-space:nowrap;使用。

  • overflow:hidden;代表著超出文本的部分不顯示

  • white-space:nowrap;代表強制文本在一行顯示。

  • 完整代碼:
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    &必要的寬度限制

格式注意:

  • 一般文字是用一個span包裹,但是ellipsis不能寫在span里,否則無效,要寫在最近的包裹了span的div里面,必須最近,否則祖父級別以上的也無效,不會顯示....
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,460評論 0 11
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 2,136評論 0 2
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,227評論 1 4
  • 1.CSS簡介 Cascading Style Sheet 層疊樣式表 主要用來定義頁面中的表現(xiàn),HTML 描述頁...
    hyt222閱讀 1,010評論 0 0
  • 2017-08-19老錢說錢 今天的話題有點大。 如上圖,“邏輯一”是因為最近看了一些關(guān)于“消費升級”的文章和分享...
    老錢說錢閱讀 370評論 0 0

友情鏈接更多精彩內(nèi)容