一、單行文字

<div class="text">我是單行文字我是單行文字我是單行文字我是單行文字我是單行文字我是單行文字我是單行文字我是單行文字 </div> .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

二、多行文字

<div class="text">我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字 </div> .text{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4; /*行數*/-webkit-box-orient: vertical; }

注意：多行文字中不能在 p標簽和div里，如下示例中不會出現點點點：

<div class="text"><p>我是多行文字我是多行文字我是多行文字</p><p>我是多行文字我是多行文字我是多行文字</p><p>我是多行文字我是多行文字我是多行文字</p><div>我是多行文字我是多行文字我是多行文字</div><div>我是多行文字我是多行文字我是多行文字</div><div>我是多行文字我是多行文字我是多行文字</div> </div>

總結

以上是生活随笔為你收集整理的CSS——文字溢出省略成点点点的全部內容，希望文章能夠幫你解決所遇到的問題。

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