CSS可以判斷文本是否超出容器的寬度,因此可以通過CSS檢測是否有省略號。
/* 檢測是否有省略號 */ .test { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 如果沒有省略號的樣式 */ .test:not(:overflowing) { /* Your Style Here */ }
在上面的代碼中,我們使用了CSS偽類:overflowing
來判斷是否有省略號。如果沒有省略號,我們可以通過.test:not(:overflowing)
來設(shè)置樣式。
需要注意的是,:overflowing
只在WebKit瀏覽器中有效(例如Chrome和Safari)。對于其他瀏覽器,我們可以使用JavaScript來檢測有無省略號。
var element = document.querySelector('.test'); if (element.offsetWidth< element.scrollWidth) { // 沒有省略號 } else { // 有省略號 }
通過上面的代碼,我們可以檢測到是否有省略號。當(dāng)元素的實際寬度(scrollWidth
)大于容器的寬度(offsetWidth
)時,就表示有省略號。
綜上所述,我們可以使用CSS或JavaScript來判斷元素是否有省略號,以便根據(jù)不同情況進行樣式調(diào)整。
上一篇css判斷ie情況
下一篇css判斷瀏覽器大小