javascript - 當(dāng)一個(gè)標(biāo)簽中的字超過(guò)9個(gè)字符就以省略號(hào)顯示,詳情看截圖
問(wèn)題描述
要求左邊的span標(biāo)簽中的字超過(guò)9個(gè)字符就以點(diǎn)省略號(hào)顯示,右邊的span和左邊span是一樣的
問(wèn)題解答
回答1：$(’span’).text().length>9?$(’span’).text($(’span’).text().slice(0,9)+’...’):$(’span’).text($(’span’).text())
回答2：給你來(lái)了個(gè)JS 版 num*10是后面的三個(gè)點(diǎn)需要占一個(gè)位置
<!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>
網(wǎng)公網(wǎng)安備