有時(shí)候我們會(huì)遇到這樣的情景，在一行顯示過長的文字時(shí)會(huì)溢出，頁面將變得很丑陋。這時(shí)候我們想要只顯示一部分文字，將多余部分以省略號 “...” 的形式顯示。那么我們可以通過設(shè)置 CSS 樣式來達(dá)到目的。

代碼示例：

HTML

<div class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>

CSS

.truncate {width: 50px;height: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }

---

好了，就是這樣！

總結(jié)

以上是生活随笔為你收集整理的css 单行文本溢出显示省略号的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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