javascript - 當一個標簽中的字超過9個字符就以省略號顯示,詳情看截圖
問題描述
要求左邊的span標簽中的字超過9個字符就以點省略號顯示,右邊的span和左邊span是一樣的
問題解答
回答1：$(’span’).text().length>9?$(’span’).text($(’span’).text().slice(0,9)+’...’):$(’span’).text($(’span’).text())
回答2：給你來了個JS 版 num*10是后面的三個點需要占一個位置
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Document</title> <style>span { display: inline-block; /*font-size: 24px;*/}.hidden { white-space: nowrap; /*width: calc(24px*9);*/ text-overflow: ellipsis; overflow: hidden;} </style></head><body> <h3><span class='a'>哈哈哈哈哈哈哈哈哈哈哈哈</span>-<span class='b'>哈呵呵呵呵呵呵還好還好還好</-span> </h3></body><script type='text/javascript'> window.onload = function(){function hideWords(tagClass) { var spanTag = document.querySelector(tagClass), fz = document.defaultView.getComputedStyle(spanTag).fontSize, num = parseFloat(fz); var widths = num*10; spanTag.style.width = widths + ’px’; if(spanTag.innerHTML.length > 9) {spanTag.setAttribute(’class’,’hidden’); }}hideWords(’.a’);hideWords(’.b’); }</script></html>
![css3 - [CSS] 動畫效果 3D翻轉bug](http://www.cgvv.com.cn/attached/image/news/202304/110831f073.png)
網公網安備