Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A feature test to determine if text-overflow: ellipsis; works in the current browser (using jQuery)
(function ($) {
// innocent until proven guilty
$.extend({'ellipsis':{'nativeSupport' : false}});
// do a quick feature test to see if we're natively supported
$(function () {
// a hidden node we're testing and it's soon-to-be clone
var cloned, hidden = $('<div style="visibility:hidden;position:absolute;white-space:nowrap;overflow:hidden;"></div>'),
// give any possible rules that would give native support (omit -ms-text-overflow - does the same thing)
nativeRules = ['text-overflow', '-o-text-overflow'];
// add each of the prospective native rules
$(nativeRules).each(function (i, rule) {
hidden.css(rule, 'ellipsis');
// add to <body> when DOM is ready
// deep clone the node (include attributes)
cloned = hidden.clone(true);
// check to see which survived
$(nativeRules).each(function (i, rule) {
if ('ellipsis' === $(cloned).css(rule)) {
$.ellipsis.nativeRule = rule;
$.ellipsis.nativeSupport = true;
return false;
// clean-up
cloned = hidden = null;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment