Skip to content

Instantly share code, notes, and snippets.

@danbeam

danbeam/text-overflow-ellipsis-feature-test-jquery.js

Created April 9, 2011 02:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danbeam/911042 to your computer and use it in GitHub Desktop.
Save danbeam/911042 to your computer and use it in GitHub Desktop.
Download ZIP
A feature test to determine if text-overflow: ellipsis; works in the current browser (using jQuery)
Raw
text-overflow-ellipsis-feature-test-jquery.js
(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
$('body').append(hidden);
// 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
hidden.remove();
cloned = hidden = null;
});
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment