Skip to content

Instantly share code, notes, and snippets.

@masotime
Last active August 29, 2015 14:26
Show Gist options
  • Select an option

  • Save masotime/c2fa18fbca1f7617633f to your computer and use it in GitHub Desktop.

Select an option

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

masotime commented Aug 3, 2015

Copy link
Copy Markdown
Author

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