Web前端培訓(xùn)：CSS如何實(shí)現(xiàn)文本超出部分顯示省略號(hào)

當(dāng)文本的內(nèi)容超出容器的寬度的時(shí)候，我們希望在其默認(rèn)添加省略號(hào)以達(dá)到提示用戶內(nèi)容省略顯示的效果。

我們觀察如下效果,當(dāng)文本超出一定寬度的以后,就顯示省略號(hào)代替。

實(shí)現(xiàn)文本超出部分顯示省略號(hào),我們可以分3步：

1. 書寫HTML結(jié)構(gòu)

2. CSS實(shí)現(xiàn)單行文字顯示省略號(hào)

3. CSS實(shí)現(xiàn)多行文字顯示省略號(hào)

一. 第一步 —— 書寫HTML結(jié)構(gòu)

目標(biāo) : 書寫HTML結(jié)構(gòu),我用p標(biāo)簽包裹一定長度的文本內(nèi)容

小結(jié) : 在body標(biāo)簽里寫一個(gè)p標(biāo)簽放文本內(nèi)容,但是其他標(biāo)簽也是可以的,建議使用塊標(biāo)簽,比如div

二. 第二步 —— 單行文字顯示省略號(hào)

目標(biāo) : 使用css屬性width,white-space,overflow,text-overflow實(shí)現(xiàn)單行文字顯示省略號(hào)

1. 給p標(biāo)簽設(shè)定一個(gè)固定寬度

2. 讓內(nèi)容溢出不換行

/*讓內(nèi)容溢出不換行*/

white-space:nowrap;

3. 讓超出的內(nèi)容隱藏

/*讓超出的內(nèi)容隱藏*/

overflow:hidden;

4. 讓超出的內(nèi)容用省略號(hào)顯示

/*讓超出的內(nèi)容用省略號(hào)顯示*/

text-overflow:ellipsis;

小結(jié) : 使用white-space,overflow,text-overflow需要同時(shí)設(shè)置,缺一不可,并且需要給元素設(shè)置寬度

三. 第三步 —— 多行文字顯示省略號(hào)

目標(biāo) : 使用css屬性width,overflow,text-overflow,display,box-orient,line-clamp實(shí)現(xiàn)多行文字顯示省略號(hào)

1. 讓超出內(nèi)容隱藏,超出內(nèi)容用省略顯示,不需要讓內(nèi)容溢出不換行

/*讓超出的內(nèi)容隱藏*/

overflow:hidden;

/*讓超出的內(nèi)容用省略號(hào)顯示*/

text-overflow:ellipsis;

2. 指定為彈性伸縮盒子,子元素垂直排列顯示,顯示多少行內(nèi)容

/*作為彈性伸縮盒子模型顯示*/

display:-webkit-box;

/*設(shè)置伸縮盒子的子元素排列方式--從上到下垂直排列*/

-webkit-box-orient:vertical;

/*指定顯示的多少行*/

-webkit-line-clamp:3;

小結(jié) :

1. 讓超出的內(nèi)容隱藏overflow:hidden;

2. 讓超出的內(nèi)容用省略號(hào)顯示text-overflow:ellipsis;

3. 作為彈性伸縮盒子模型顯示display:-webkit-box;

4. 設(shè)置伸縮盒子的子元素排列方式--從上到下垂直排列-webkit-box-orient:vertical;

5. 指定顯示的多少行-webkit-line-clamp:3;

總結(jié)

CSS實(shí)現(xiàn)文本超出部分顯示省略號(hào)的主要步驟：

1. 書寫HTML結(jié)構(gòu),用一個(gè)標(biāo)簽包裹內(nèi)容,也可以指定這個(gè)標(biāo)簽的寬度,如果不指定就會(huì)根據(jù)瀏覽器的寬度變化而變化

2. 單行文字顯示省略號(hào)

/*讓內(nèi)容溢出不換行*/

white-space:nowrap;

/*讓超出的內(nèi)容隱藏*/

overflow:hidden;

/*讓超出的內(nèi)容用省略號(hào)顯示*/

text-overflow:ellipsis;

3. 多行文字顯示省略號(hào)

/*讓超出的內(nèi)容隱藏*/

overflow:hidden;

/*讓超出的內(nèi)容用省略號(hào)顯示*/

text-overflow:ellipsis;

/*作為彈性伸縮盒子模型顯示*/

display:-webkit-box;

/*設(shè)置伸縮盒子的子元素排列方式--從上到下垂直排列*/

-webkit-box-orient:vertical;

/*指定顯示的多少行*/

-webkit-line-clamp:3;