一般情況下一行文字在一定區域顯示的話如果不限定高度，那么在內容超過的寬度的話就會換行顯示，為了頁面的美觀，目前的通用做法就是在最后顯示…，然后鼠標懸浮顯示完整內容，具體設置如下:

height: 40px; overflor: hidden; text-overflow: ellipsis; white-space: nowrap;

超出部分顯示…

主要就是這四個屬性，按順序分別是：1、要有固定高度 2、超出部分隱藏 3、顯示… 4、文本不換行

如果是vue項目,如果你的組件庫是使用的element-ui，那么可以結合tooltip組件來實現這種效果。不過需要先計算出正常顯示效果后再通過設置某個dom的textOverflow的true和false，來控制tooltop的顯示與隱藏。

function handleStyle (dataList, dom, limitedHeight, _this) {let ele = document.querySelectorAll(dom)for (let index = 0; index < ele.length; index++) {let element = window.getComputedStyle(ele[index])if (parseInt(element.height) > limitedHeight) {_this.$set(dataList[index], 'textOverflow', true)}} }// 等dom渲染完成后再計算某個dom在大于某個高度后是否需要顯示tooltip this.$nextTick(()=>{handleStyle(this.list, ".item", 43, this)})

原文：

文字超出顯示點點點之ellipsis 設置?www.dsiab.com

總結

以上是生活随笔為你收集整理的div超出不换行_文字超出显示点点点之ellipsis 设置的全部內容，希望文章能夠幫你解決所遇到的問題。

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