為了保證頁面的整潔美觀，在很多的時候，我們常需要隱藏超出長度的文字。這在列表條目，題目，名稱等地方常用到。

效果如下:

未限制顯示長度，如果超出了會溢出到第二行里。嚴重影響用戶體驗和顯示效果。

我們在列表樣式里添加css，如下圖。

修改后效果:

正文開始

(1).文字超出一行，省略超出部分，顯示'...'

如果這種情況比較多，可以取一個切合作用的類名用于復用。

.line-limit-length {overflow: hidden;text-overflow: ellipsis;white-space: nowrap; //文本不換行，這樣超出一行的部分被截取，顯示...}

最新消息：神秘地球黑洞深不可測，不停吸入周圍海水。

//圖標字體

(2). 可以給定容器寬度限制，超出部分省略

.product-buyer-name {max-width: 110px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

橘子橘子

總結

以上是生活随笔為你收集整理的html设置文字超过字数_css限制文字显示字数长度，超出部分自动用省略号显示，防止溢出到第二行...的全部內容，希望文章能夠幫你解決所遇到的問題。

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