Skip to content

Instantly share code, notes, and snippets.

@mhulse
Created July 6, 2011 16:37
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 mhulse/1067691 to your computer and use it in GitHub Desktop.
Save mhulse/1067691 to your computer and use it in GitHub Desktop.
Text overflow CSS example...
/*
**
** CSS: text-overflow
** URI: http://www.quirksmode.org/css/textoverflow.html
**
** JS: jquery.textOverflow
** Website: http://www.bramstein.com/projects/text-overflow/
** About: This jQuery plugin implements a simplified version of the CSS3 text-overflow property [for Firefox].
** Compatibility:
** Mac: Firefox v3.6, Safari v4.0.3 (5531.9), Opera v10.10, Chrome v4.0.249.49 (35163) beta
** PC: Internet Explorer v7.0.6002.18005, Internet Explorer v8.0.6001.18882, Safari v4.0.3 (531.9.1), Firefox v3.5.6
** HTML: <ul class="snip"><li>...</li></ul>
**
*/
.snip li {
white-space: nowrap; /* Needed for the ellipsis to work. */
overflow: hidden; /* The "overflow" property's value must be different from "visible". */
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
}
* html .snip li {
/*
** Unfortunately, IE6 requires a hard-coded width in order for the 'text-overflow' declaration to function.
** I do not want to specify a width and can live without the single-line ellipsis look/feel in this browser.
*/
white-space: normal;
overflow: auto;
}
@mhulse
Copy link
Author

mhulse commented Jul 6, 2011

Used in conjunction with this plugin.

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