如何解决如何使用Javascript检查文本是否被CSS截断
我正在尝试检测是否使用JS截断了文本。解决方案mentioned here效果很好,但以下情况除外。您将注意到,即使文本在视觉上被截断,鼠标悬停的第一个块也将返回false。
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
function onMouseHover(e) {
console.log(`is truncated: ${isEllipsisActive(e)}`);
}
div.red {
margin-bottom: 1em;
background: red;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 300px;
cursor: pointer;
}
<h6>Hover mouse and watch for console messages.</h6>
<!-- should return true -->
<div class="red" onmouseover="onMouseHover(this)">
<a>Analytics reports comes through garbled. Plsss</a>
</div>
<!-- should return true -->
<div class="red" onmouseover="onMouseHover(this)">
<a>Analytics reports comes through garbled. Plsssssss</a>
</div>
<!-- should return false -->
<div class="red" onmouseover="onMouseHover(this)">
<a>Normal text</a>
</div>
我追求的解决方案是,每当css截断文本时,函数就返回true。
解决方法
这里的问题是HTMLElement.offsetWidth
和Element.scrollWidth
都是舍入值。
您元素的实际内部宽度实际上是我计算机上的300.40625px
,在我的Chrome浏览器中,该元素的实际内部宽度已降至300px
。
这里的解决方案是使用返回浮点值的API,并且没有太多...
一个人很想检查内部<a>
的{{3}},这实际上适用于所有OP的情况,但这仅适用于以下情况:在div中添加一个填充,这些<a>
的边距或其他元素被破坏了。
document.querySelectorAll( ".test" ).forEach( el => {
el.classList.toggle( "truncated",isEllipsisActive( el ) );
} );
function isEllipsisActive( el ) {
return el.firstElementChild.getBoundingClientRect().width > el.getBoundingClientRect().width;
}
div.test {
margin-bottom: 1em;
background: red;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 300px;
}
div.truncated {
background: green;
}
.margin-left {
margin-left: 225px;
}
<!-- should be green -->
<div class="test">
<a>Analytics reports comes through garbled. Plsss</a>
</div>
<!-- should be green -->
<div class="test">
<a>Analytics reports comes through garbled. Plsssssss</a>
</div>
<!-- should be green -->
<div class="test">
<a>Analytics</a><a> reports comes through garbled. Plsssssss</a>
</div>
<!-- should be green -->
<div class="test">
<a class="margin-left">Shorter text</a>
</div>
<!-- should be red -->
<div class="test">
<a>Normal text</a>
</div>
因此,人们可能会认为getBoundingClientRect().width
及其Range方法会行得通,尽管这可以告诉您元素中 text 内容的实际大小,这只会检查文本内容。如果滚动是由页边距引起的,则它将无效。
document.querySelectorAll(".test").forEach( el => {
el.classList.toggle( "truncated",isEllipsisActive( el ) );
} );
function isEllipsisActive( el ) {
return el.scrollWidth !== el.offsetWidth ?
el.scrollWidth > el.offsetWidth :
checkRanges( el ); // Blink and Webkit browsers do floor scrollWidth
}
function checkRanges( el ) {
const range = new Range();
range.selectNodeContents( el );
const range_rect = range.getBoundingClientRect();
const el_rect = el.getBoundingClientRect();
// assumes ltr direction
return range_rect.right > el_rect.right;
}
div.test {
margin-bottom: 1em;
background: red;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 300px;
}
div.truncated {
background: green;
}
.margin-left {
margin-left: 225px;
}
.margin-right {
margin-right: 225px;
}
<!-- should be green -->
<div class="test">
<a>Analytics reports comes through garbled. Plsss</a>
</div>
<!-- should be green -->
<div class="test">
<a>Analytics reports comes through garbled. Plsssssss</a>
</div>
<!-- should be green -->
<div class="test">
<a>Analytics</a><a> reports comes through garbled. Plsssssss</a>
</div>
<!-- should be green -->
<div class="test">
<a class="margin-left">Shorter text</a>
</div>
<!-- should be green -->
<div class="test">
<a class="margin-right">Shorter text</a>
</div>
<!-- should be red -->
<div class="test">
<a>Normal text</a>
</div>
因此,我能想到的唯一解决方案取决于Chrome的特定行为:它们确实在getBoundingClientRect()
的结果中公开了呈现省略号的Client Rect。
因此,可以确定在Chrome中(如果呈现了省略号)的一种方法是切换text-overflow
属性并检查此DOMRect是否出现。
但是,由于这是仅Chrome的行为,因此我们仍然需要检查Safari的Range边界框位置。
document.querySelectorAll(".test").forEach( el => {
el.classList.toggle( "truncated",isEllipsisActive( el ) );
} );
function isEllipsisActive( el ) {
return el.scrollWidth !== el.offsetWidth ?
el.scrollWidth > el.offsetWidth :
checkRanges( el ); // Blink and Webkit browsers do floor scrollWidth
}
function checkRanges( el ) {
const range = new Range();
range.selectNodeContents( el );
const range_rect = range.getBoundingClientRect();
const el_rect = el.getBoundingClientRect();
// assumes ltr direction
if( range_rect.right > el_rect.right ) {
return true;
}
// Following check would be enough for Blink browsers
// but they are the only ones exposing this behavior.
// first force ellipsis
el.classList.add( "text-overflow-ellipsis" );
// get all the client rects (there should be one for the ellipsis)
const rects_ellipsis = range.getClientRects();
// force no ellipsis
el.classList.add( "text-overflow-clip" );
const rects_clipped = range.getClientRects();
// clean
el.classList.remove( "text-overflow-ellipsis" );
el.classList.remove( "text-overflow-clip" );
// if the counts changed,the text is truncated
return rects_clipped.length !== rects_ellipsis.length;
}
/* 2 new clasess to force the rendering of ellipsis */
.text-overflow-ellipsis {
text-overflow: ellipsis !important;
}
.text-overflow-clip {
text-overflow: clip !important;
}
div.test {
margin-bottom: 1em;
background: red;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 300px;
}
div.truncated {
background: green;
}
.margin-left {
margin-left: 225px;
}
.margin-right {
margin-right: 225px;
}
<!-- should be green -->
<div class="test">
<a>Analytics reports comes through garbled. Plsss</a>
</div>
<!-- should be green -->
<div class="test">
<a>Analytics reports comes through garbled. Plsssssss</a>
</div>
<!-- should be green -->
<div class="test">
<a>Analytics</a><a> reports comes through garbled. Plsssssss</a>
</div>
<!-- should be green -->
<div class="test">
<a class="margin-left">Shorter text</a>
</div>
<!-- should be green -->
<div class="test">
<a class="margin-right">Shorter text</a>
</div>
<!-- should be red -->
<div class="test">
<a>Normal text</a>
</div>
,
尝试使用
function isEllipsisActive(e) {
var c = e.cloneNode(true);
c.style.display = 'inline';
c.style.width = 'auto';
c.style.visibility = 'hidden';
document.body.appendChild(c);
const truncated = c.offsetWidth >= e.clientWidth;
c.remove();
return truncated;
}
这很hack,但是可以。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。