Skip to content

Instantly share code, notes, and snippets.

@masotime
Last active August 29, 2015 14:26
Show Gist options
  • Save masotime/c2fa18fbca1f7617633f to your computer and use it in GitHub Desktop.
Save masotime/c2fa18fbca1f7617633f to your computer and use it in GitHub Desktop.
Determining if one-liner span has ellipsis overflow
function getVisibleWidth(elem) {
// cross browser, returns decimals for ultra-precision
return elem.getBoundingClientRect().right - elem.getBoundingClientRect().left;
}
function getNaturalWidth(elem) {
var old = {
overflow: elem.style.overflow,
width: elem.style.width,
display: elem.style.display
}, result;
elem.style.overflow = 'visible';
elem.style.width = 'auto';
elem.style.display = 'inline-block';
result = getVisibleWidth(elem);
elem.style.overflow = old.overflow;
elem.style.width = old.width;
elem.style.display = old.display;
return result;
}
function hasEllipsis(elem) {
function getStyle(style) {
if (window.getComputedStyle) {
return window.getComputedStyle(elem)[style]; // modern browsers
} else {
return elem.currentStyle[style]; // IE
}
}
var ellipsisConfigured = getStyle('overflow') === 'hidden' || getStyle('text-overflow') === 'ellipsis';
if (ellipsisConfigured) {
visibleWidth = getVisibleWidth(elem);
naturalWidth = getNaturalWidth(elem);
return visibleWidth < naturalWidth;
} else {
return false;
}
}
@masotime
Copy link
Author

masotime commented Aug 3, 2015

Tested in IE8 standards mode. Screw quirks mode.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment