css文本超出長度用省略號顯示

當(dāng)我們制作列表頁的時候，一般都是獲取文章標(biāo)題，然后一行一行的顯示。

但是當(dāng)標(biāo)題過長的時候，就會造成換行顯示。

雖然我們可以使用overflow:hidden將超過寬度的字符隱藏掉。

但是結(jié)尾看起來總會讓人覺得有點僵硬。

而且也不利于讓用戶知道后面還有沒顯示完的字符。

最好的方法，就是將多余的字符用省略號來代替。

今天小編帶來的就是，使用css讓單行文本超出長度的部分用省略號顯示。

以下為主要代碼：

?

?

overflow:hidden;white-space: nowrap;text-overflow: ellipsis;

?

<style> .overflow{width:220px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;} </style>

<div>

歡迎來到csdn博客,請記住我們的網(wǎng)址blog.csdn.net

</div>

<div class="overflow">

歡迎來到csdn博客,請記住我們的網(wǎng)址blog.csdn.net

</div>

結(jié)果

?

歡迎來到csdn博客,請記住我們的網(wǎng)址blog.csdn.net

歡迎來到csdn博客,請記住我們的網(wǎng)址bl...

?

以上就是使用css解決文本超出長度用省略號替代的方法，希望對小伙伴們有幫助。

轉(zhuǎn)載于:https://www.cnblogs.com/zhangjiabing/p/10898742.html

總結(jié)

以上是生活随笔為你收集整理的2019年5月21号总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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