效果圖

HTML

<p class="p1">qwertyuiopasdfghjklzxcvbnm</p><div class="d1"><p>　馮塘村過去經(jīng)濟(jì)較為落后。幾年前，鎮(zhèn)里以400多年的馮塘古村為基礎(chǔ)，引來社會資金投資休閑農(nóng)莊和共享民宿，把這里建設(shè)成了一個(gè)集生態(tài)農(nóng)業(yè)、創(chuàng)意農(nóng)業(yè)、旅游觀光、休閑體驗(yàn)、果蔬采摘、農(nóng)產(chǎn)品生產(chǎn)加工等為一體的鄉(xiāng)村生態(tài)旅游區(qū)。</p></div>

CSS

.p1{width: 200px;text-overflow: ellipsis;white-space: normal;overflow: hidden;}.d1{width: 200px;border: 1px solid #FF0000;}.d1 p{overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}

ps：在p標(biāo)簽中使用全英文如

<p class="p1">qwertyuiopasdfghjklzxcvbnm</p>

是不會自動換行的，需要修改p標(biāo)簽的換行規(guī)制，

p{word-wrap:break-word; // 或者 word-break: break-all; }

釋義：
1.white-space：設(shè)置如何處理元素間的空白，默認(rèn)為normal，表示空白會被瀏覽器忽略，white-space: nowrap;表示不換行。
2.word-break：規(guī)定自動換行的處理方法。normal:使用瀏覽器默認(rèn)換行規(guī)則，break-all：允許在單詞內(nèi)換行，keep-all：只能在半角空格或連字符處換行。
3.word-wrap：允許長單詞或URL地址換行到下一行。normal：只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理），break-word：在長單詞或URL地址內(nèi)部進(jìn)行換行。
若兩個(gè)屬性同時(shí)存在，以word-break: break-all;為準(zhǔn)。

建議使用p標(biāo)簽測試時(shí)，使用中文

總結(jié)

以上是生活随笔為你收集整理的学习《css世界》笔记之使用overflow做文字溢出点点点效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。