css實現(xiàn)省略號

代碼示例

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

text-overflow

value 含義
ellipsis 文本截斷處不顯示省略號
clip 文本截斷處出現(xiàn)省略號

text-overflow是個修飾樣式,當(dāng)文本超出容器的時候,文本將被截斷。

value 含義
ellipsis 文本截斷處不顯示省略號
clip 文本截斷處出現(xiàn)省略號

white-space

value 含義
normal 空白被瀏覽器忽略
pre 空白被瀏覽器保留,類似pre標(biāo)簽塊
nowrap 文本不會換行
pre-wrap 保留空白符,正常換行
pre-line 保留空白符,保留換行符
inherit 父元素集成

只設(shè)置text-overflow是不夠的,還要設(shè)置white-space,規(guī)定段落中的文本是否換行。

value 含義
normal 空白被瀏覽器忽略
pre 空白被瀏覽器保留,類似pre標(biāo)簽塊
nowrap 文本不會換行
pre-wrap 保留空白符,正常換行
pre-line 保留空白符,保留換行符
inherit 父元素集成
?著作權(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:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 2,103評論 0 2
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,423評論 0 11
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,525評論 19 139
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,190評論 1 4
  • 1.CSS3 邊框 border-radius CSS屬性用來設(shè)置邊框圓角。當(dāng)使用一個半徑時確定一個圓形;當(dāng)使用兩...
    garble閱讀 773評論 0 0

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