The problem here is that both HTMLElement.offsetWidth and Element.scrollWidth are rounded values.
Your element's true inner-width is actually 300.40625px on my computer, and this gets floored to 300px in my Chrome.
The solution here is to use APIs that return float values, and there aren't much...
One could be tempted to check the inner <a>'s getBoundingClientRect().width, and that would actually work in all OP's cases, but that would only work in these case: Add a padding to the div, a margin to these <a>, or an other element and it's broken.
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>
So one might think a Range and its getBoundingClientRect() method would do, however, while this is able to tell the real size of the text content in your element, this only checks for the text content. If the scrolling is caused by a margin, it won't work.
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>
So the only solution I could think of relies on a Chrome specific behavior: They do expose the Client Rect of the rendered ellipsis in the result of Range.getClientRects().
So a way to know for sure, in Chrome, if the ellipsis is rendered, is to toggle the text-overflow property and check if this DOMRect appeared.
However, since this is a Chrome only behavior, we still need to check for the Range's bounding-box position for Safari.
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>
Small update
Since this CL Chrome doesn't expose the bounding box of the ellipsis in case the start range is 0, (which apparently is the case in the penultimate test in the above snippet).
This means that our workaround doesn't work in that special case anymore.
