Created
July 6, 2011 16:37
-
-
Save mhulse/1067691 to your computer and use it in GitHub Desktop.
Text overflow CSS example...
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
** | |
** 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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Used in conjunction with this plugin.