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

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

我們觀察如下效果,當文本超出一定寬度的以后,就顯示省略號代替。

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

1. 書寫HTML結(jié)構

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

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

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

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

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

二. 第二步 —— 單行文字顯示省略號

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

1. 給p標簽設定一個固定寬度

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

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

white-space:nowrap;

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

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

overflow:hidden;

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

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

text-overflow:ellipsis;

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

三. 第三步 —— 多行文字顯示省略號

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

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

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

overflow:hidden;

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

text-overflow:ellipsis;

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

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

display:-webkit-box;

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

-webkit-box-orient:vertical;

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

-webkit-line-clamp:3;

小結(jié) :

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

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

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

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

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

總結(jié)

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

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

2. 單行文字顯示省略號

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

white-space:nowrap;

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

overflow:hidden;

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

text-overflow:ellipsis;

3. 多行文字顯示省略號

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

overflow:hidden;

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

text-overflow:ellipsis;

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

display:-webkit-box;

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

-webkit-box-orient:vertical;

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

-webkit-line-clamp:3;