CSS基础(part18)--溢出的文字省略号显示
生活随笔
收集整理的這篇文章主要介紹了
CSS基础(part18)--溢出的文字省略号显示
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
學(xué)習(xí)筆記，僅供參考，有錯(cuò)必糾
參考自：pink老師課堂筆記
文章目錄
- 溢出的文字省略號(hào)顯示
- white-space
- text-overflow
- 溢出的文字省略號(hào)顯示三部曲
- 舉個(gè)例子
溢出的文字省略號(hào)顯示
white-space
white-space設(shè)置或檢索對(duì)象內(nèi)文本顯示方式，通常我們使用于強(qiáng)制一行顯示內(nèi)容：
white-space: normal; /*默認(rèn)處理方式*/white-space: nowrap; /*強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br標(biāo)簽對(duì)象才換行。*/text-overflow
text-overflow設(shè)置或檢索是否使用一個(gè)省略標(biāo)記（...）標(biāo)示對(duì)象內(nèi)文本的溢出：
text-overflow : clip; /*不顯示省略標(biāo)記（...），而是簡(jiǎn)單的裁切 */ text-overflow：ellipsis; /*當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）*/溢出的文字省略號(hào)顯示三部曲
/*1. 先強(qiáng)制一行內(nèi)顯示文本*/ white-space: nowrap; /*2. 超出的部分隱藏*/ overflow: hidden; /*3. 文字用省略號(hào)替代超出的部分*/ text-overflow: ellipsis;
舉個(gè)例子
HTML頁(yè)面：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>定位</title><style>div {width: 100px;height: 50px;border: 2px solid red;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style> </head> <body><div>安徽財(cái)經(jīng)大學(xué)統(tǒng)計(jì)與用用數(shù)學(xué)學(xué)院安徽財(cái)經(jīng)大學(xué)統(tǒng)計(jì)與用用數(shù)學(xué)學(xué)院安徽財(cái)經(jīng)大學(xué)統(tǒng)計(jì)與用用數(shù)學(xué)學(xué)院安徽財(cái)經(jīng)大學(xué)統(tǒng)計(jì)與用用數(shù)學(xué)學(xué)院</div> </body> </html>頁(yè)面：
總結(jié)
以上是生活随笔為你收集整理的CSS基础(part18)--溢出的文字省略号显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： CSS基础(part17)--verti
- 下一篇： 网络时代的利与弊分别是什么