我在页面上有一个块元素的集合。它们都有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的文本内容。
当前回答
我认为更好的检测方法是使用getClientRects()，似乎每个rect都有相同的高度，所以我们可以用不同的顶部值来计算行数。
getClientRects是这样工作的
function getRowRects(element) {
var rects = [],
clientRects = element.getClientRects(),
len = clientRects.length,
clientRect, top, rectsLen, rect, i;
for(i=0; i<len; i++) {
has = false;
rectsLen = rects.length;
clientRect = clientRects[i];
top = clientRect.top;
while(rectsLen--) {
rect = rects[rectsLen];
if (rect.top == top) {
has = true;
break;
}
}
if(has) {
rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
rect.width = rect.right - rect.left;
}
else {
rects.push({
top: clientRect.top,
right: clientRect.right,
bottom: clientRect.bottom,
left: clientRect.left,
width: clientRect.width,
height: clientRect.height
});
}
}
return rects;
}
getrowreck是这样工作的
你可以这样检测
其他回答
如果你有反应，我是这么做的。
<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>
在比较offsetWidth > scrollWidth时，上面的答案有一个小像素问题。
W3C有一个返回元素的遗留API。scrollWidth值被四舍五入，这导致比较在某些情况下返回false。 如果元素宽度为150px, scrollWidth为150.4px(四舍四入到150)，那么即使浏览器在文本中显示省略号，该检查也将返回false。
他们已经尝试更新返回分数像素的api，但由于webcompat，它被恢复了。
有一个使用max-content和getClientRects()的变通方法。 这是一个示例代码，我使用onMouseEnter。 注意，这只在容器的边界为可用宽度的100%时才有效(因此，如果您使用flexbox，您的容器必须为flex: 1例如。
hasEllipsis(elementItem) {
let scrollWidth = elementItem.scrollWidth;
elementItem.style.width = 'max-content';
const itemRects = elementItem.getClientRects();
if (itemRects.length > 0 && itemRects[0].width > scrollWidth) {
scrollWidth = itemRects[0].width;
}
elementItem.style.width = 'auto';
return scrollWidth > elementItem.clientWidth;
}
文章:
https://bugs.chromium.org/p/chromium/issues/detail?id=980476
https://github.com/w3c/csswg-drafts/issues/4123
曾几何时，我需要这样做，我遇到的唯一跨浏览器可靠的解决方案是hack job。我不是这种解决方案的最大粉丝，但它肯定会一次又一次地产生正确的结果。
其思想是克隆元素，删除任何边界宽度，并测试克隆的元素是否比原始元素宽。如果是，你知道它将被截断。
例如，使用jQuery:
var $element = $('#element-to-test');
var $c = $element
.clone()
.css({display: 'inline', width: 'auto', visibility: 'hidden'})
.appendTo('body');
if( $c.width() > $element.width() ) {
// text was truncated.
// do what you need to do
}
$c.remove();
我制作了一个jsFiddle来演示这一点，http://jsfiddle.net/cgzW8/2/
你甚至可以为jQuery创建自己的自定义伪选择器:
$.expr[':'].truncated = function(obj) {
var $this = $(obj);
var $c = $this
.clone()
.css({display: 'inline', width: 'auto', visibility: 'hidden'})
.appendTo('body');
var c_width = $c.width();
$c.remove();
if ( c_width > $this.width() )
return true;
else
return false;
};
然后用它来寻找元素
$truncated_elements = $('.my-selector:truncated');
演示:http://jsfiddle.net/cgzW8/293/
希望这能帮到你。
e.offsetWidth < e.scrollWidth解决方案并不总是有效。
如果你想使用纯JavaScript，我建议使用这个:
(打印稿)
public isEllipsisActive(element: HTMLElement): boolean {
element.style.overflow = 'initial';
const noEllipsisWidth = element.offsetWidth;
element.style.overflow = 'hidden';
const ellipsisWidth = element.offsetWidth;
if (ellipsisWidth < noEllipsisWidth) {
return true;
} else {
return false;
}
}
