文章詳情頁

javascript - 當一個標簽中的字超過9個字符就以省略號顯示,詳情看截圖

瀏覽：205日期：2023-01-06 17:58:29

問題描述

要求左邊的span標簽中的字超過9個字符就以點省略號顯示,右邊的span和左邊span是一樣的 javascript - 當一個標簽中的字超過9個字符就以省略號顯示,詳情看截圖

問題解答

回答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>