1.css文本溢出兩行顯示省略號(hào)

實(shí)現(xiàn)功能如何用純CSS實(shí)現(xiàn)文字單行居中,多行居左例如我目前有一個(gè)這樣子的HTML結(jié)構(gòu)和基本的CSS代碼        * {margin: 0;padding: 0;      }.box

2.css設(shè)置多行文字超出省略

{width: 100px;box-shadow:豹貓守宮 0010pxrgba(0, 0, 0, 0.2);padding: 10px;float: left;margin: 10px;      }.img

3.css超出一行顯示省略號(hào)

 {width: 100px;height: 100px;background: #d2d2d2;text-align: center;line-height: 100px;      }  

4.單行文本溢出省略css樣式

>PIC

我是文字

渲染出來的效果如下

5.css多行文字超出隱藏變省略號(hào)

可以發(fā)現(xiàn)的是, 目前文字是在左對齊的, 而我們文字如果比較少的時(shí)候,我們肯定是希望文字是居中對齊的, 實(shí)現(xiàn)方式就是給文字添加 text-豹貓守宮align-center 屬性.p-center {text-align

6.css多行文本溢出隱藏

: center;      }

7.css實(shí)現(xiàn)多行省略

但是如果添加了這個(gè)屬性之后, 文字少量的時(shí)候居中的需求就實(shí)現(xiàn)了. 但是大量文字的時(shí)候, 則又會(huì)呈現(xiàn)出居中狀態(tài), 這樣子就不太美觀了.

8.css文字超過幾行省略 后面跟圖標(biāo)

那么有沒有一個(gè)辦法實(shí)現(xiàn)文字不超出一行則居中顯示,超出一行則左對齊文字呢? 答案是有的,廢話不多說, 直接上代碼 ~.p-centerp {display: inline-block;text-align

9.css單行省略和多行省略

: left;      }上述豹貓守宮這行代碼是在前面所有的代碼結(jié)合之后的基礎(chǔ)上再添加的, 添加了這樣代碼之后,所呈現(xiàn)出來的效果如下

10.css超過2行省略號(hào)

實(shí)現(xiàn)了我們所需要的單行居中,多行居左效果~那么這個(gè)效果的實(shí)現(xiàn)原理是什么?可以看到給 .p-center p這個(gè)選擇器里面設(shè)置了一個(gè) display: inline-block屬性, 而這個(gè)屬性的作用是使

P的寬度根據(jù)文字的寬度伸縮,利用 inline-block 元素就可以被父級(jí) text-align:center 居中的特性,這樣就可以實(shí)現(xiàn)單行居中,多行居左.附上完整代碼 :

>

/>Document     * {margin: 0;padding: 0;     }.box 豹貓守宮{width: 100px;box-shadow: 00

10pxrgba(0, 0, 0, 0.2);padding: 10px;margin: 100px50px;float: left;     }.img {width: 100px;height: 100px

;background: #d2d2d2;text-align: center;line-height: 100px;     }/*!* 核心代碼 *!*/.p-center {text-align: center;

}/*!* 核心代碼*//*display: inline-block使P的寬度根據(jù)文字的寬度伸縮*//* *!*/豹貓守宮.p-centerp {display: inline-block;text-align

: left;     }PIC

我是文字我是文字我是文字我是文字我是文字

PIC

我是短文字

>?? 看完三件事如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我三個(gè)小忙:點(diǎn)贊,在看,收藏 讓更多的人也能看到這篇內(nèi)容 關(guān)注公眾號(hào)「前端自救指北」，不定期分享原創(chuàng)知識(shí)如需進(jìn)入前端交流群可添加小漁微信回復(fù)。

進(jìn)交流群即可

-END-