我在页面上有一个块元素的集合。它们都有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的文本内容。
当前回答
@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>
其他回答
对于那些使用(或计划使用)来自Christian Varga的公认答案的人，请注意性能问题。
以这种方式克隆/操作DOM会导致DOM Reflow(请参阅此处关于DOM Reflow的解释)，这是非常资源密集型的。
在一个页面上使用Christian Varga的100多个元素的解决方案会导致4秒的回流延迟，在此期间JS线程被锁定。考虑到JS是单线程的，这意味着对最终用户来说有很大的UX延迟。
Italo Borssatto的答案应该是公认的，在我的分析过程中，它大约快了10倍。
如果你有反应，我是这么做的。
<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); return text.width > widthEl; } .item{ width: 60px; overflow: hidden; text-overflow: ellipsis; } <div class="item">Short</div> <div class="item">Loooooooooooong</div>
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;
}
}
曾几何时，我需要这样做，我遇到的唯一跨浏览器可靠的解决方案是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/
希望这能帮到你。
