效果圖

HTML

<p class="p1">qwertyuiopasdfghjklzxcvbnm</p><div class="d1"><p>　馮塘村過去經濟較為落后。幾年前，鎮里以400多年的馮塘古村為基礎，引來社會資金投資休閑農莊和共享民宿，把這里建設成了一個集生態農業、創意農業、旅游觀光、休閑體驗、果蔬采摘、農產品生產加工等為一體的鄉村生態旅游區。</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標簽中使用全英文如

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

是不會自動換行的，需要修改p標簽的換行規制，

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

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

建議使用p標簽測試時，使用中文

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。