我在页面上有一个块元素的集合。它们都有CSS规则white-space, overflow, text-overflow设置，以便溢出的文本被修剪并使用省略号。
但是，并非所有元素都溢出。
有没有办法，我可以使用javascript来检测哪些元素溢出?
谢谢。
添加:示例HTML结构我正在工作。
<td><span>Normal text</span></td>
<td><span>Long text that will be trimmed text</span></td>
SPAN元素总是适合单元格，它们应用了省略号规则。我想检测何时将省略号应用于SPAN的文本内容。
当前回答
试试这个JS函数，将span元素作为参数传递:
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
其他回答
我的实现)
const items = Array.from(document.querySelectorAll('.item')); items.forEach(item =>{ item.style.color = checkEllipsis(item) ? 'red': 'black' }) function checkEllipsis(el){ const styles = getComputedStyle(el); const widthEl = parseFloat(styles.width); const ctx = document.createElement('canvas').getContext('2d'); ctx.font = `${styles.fontSize} ${styles.fontFamily}`; const text = ctx.measureText(el.innerText); return text.width > widthEl; } .item{ width: 60px; overflow: hidden; text-overflow: ellipsis; } <div class="item">Short</div> <div class="item">Loooooooooooong</div>
这些解决方案都不适合我，所以我选择了一种完全不同的方法。我没有使用带有省略号的CSS解决方案，而是从特定的字符串长度中剪切文本。
if (!this.isFullTextShown && this.text.length > 350) {
return this.text.substring(0, 350) + '...'
}
return this.text
并显示“更多/更少”按钮，如果长度超过。
<span
v-if="text.length > 350"
@click="isFullTextShown = !isFullTextShown"
>
{{ isFullTextShown ? 'show less' : 'show more' }}
</span>
来自italo的回答非常好!不过，让我稍微细化一下:
function isEllipsisActive(e) {
var tolerance = 2; // In px. Depends on the font you are using
return e.offsetWidth + tolerance < e.scrollWidth;
}
跨浏览器兼容性
实际上，如果您尝试上面的代码并使用console.log打印出e.offsetWidth和e.scrollWidth的值，您将注意到，在IE上，即使您没有进行文本截断，也会出现1px或2px的值差异。
所以，根据你使用的字体大小，允许一定的容忍度!
对于使用e.offsetWidth < e.scrollWidth的人，出现了可以显示全文但仍然有省略号的错误。
这是因为offsetWidth和scrollWidth总是取整这个值。例如:offsetWidth返回161，但实际宽度是161.25。 解决方案是使用getBoundingClientRect
const clonedEl = e.cloneNode(true)
clonedElement.style.overflow = "visible"
clonedElement.style.visibility = "hidden"
clonedElement.style.width = "fit-content"
e.parentElement.appendChild(clonedEl)
const fullWidth = clonedElement.getBoundingClientRect().width
const currentWidth = e.getBoundingClientRect().width
return currentWidth < fullWidth
在演示http://jsfiddle.net/brandonzylstra/hjk9mvcy/中https://stackoverflow.com/users/241142/iconoclast提到了一些错误。
在他的演示中，添加这些代码将工作:
setTimeout(() => {
console.log(EntryElm[0].offsetWidth)
}, 0)
