我在页面上有一个块元素的集合。它们都有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的文本内容。
当前回答
如果你有反应，我是这么做的。
<div
ref={ref => {
if (!ref) return
const isOverflowing = ref.scrollWidth > ref.clientWidth
if (isOverflowing) {
// handle what to do next here
}
}}
/>
其他回答
添加到@Дмытрык的答案，缺失的边界和填充的演绎是完全有效的!!
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); let extra = 0; extra += parseFloat(styles.getPropertyValue('border-left-width')); extra += parseFloat(styles.getPropertyValue('border-right-width')); extra += parseFloat(styles.getPropertyValue('padding-left')); extra += parseFloat(styles.getPropertyValue('padding-right')); return text.width > (widthEl - extra); } .item{ width: 60px; overflow: hidden; text-overflow: ellipsis; } <div class="item">Short</div> <div class="item">Loooooooooooong</div>
如果你有反应，我是这么做的。
<div
ref={ref => {
if (!ref) return
const isOverflowing = ref.scrollWidth > ref.clientWidth
if (isOverflowing) {
// handle what to do next here
}
}}
/>
@ItaloBorssatto的解决方案是完美的。但在看SO -之前，我做了一个决定。这就是:)
const elems = document.querySelectorAll('span'); elems.forEach(elem => { checkEllipsis(elem); }); function checkEllipsis(elem){ const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const styles = getComputedStyle(elem); ctx.font = `${styles.fontWeight} ${styles.fontSize} ${styles.fontFamily}`; const widthTxt = ctx.measureText(elem.innerText).width; if (widthTxt > parseFloat(styles.width)){ elem.style.color = 'red' } } span.cat { display: block; border: 1px solid black; white-space: nowrap; width: 100px; overflow: hidden; text-overflow: ellipsis; } <span class="cat">Small Cat</span> <span class="cat">Looooooooooooooong Cat</span>
对于使用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
初步的。offsetWdith VS le. scrollwidth 这对我很有用! https://jsfiddle.net/gustavojuan/210to9p1/
$(function() {
$('.endtext').each(function(index, elem) {
debugger;
if(elem.offsetWidth !== elem.scrollWidth){
$(this).css({color: '#FF0000'})
}
});
});
