Advanced Search

Return to Snippet

Revision: 63211
at April 16, 2013 23:42 by chillyjames
Updated Code 
span {
    display:block; /* because we're using a span class */
    white-space: nowrap; /* This prevents the content from breaking onto another line */
    width: 100%; /* this should be the width of your content */
    overflow: hidden; /* hides the text that is outside of your width */
    text-overflow: ellipsis; /* creates our ellipsis! */
}

Revision: 63210
at April 16, 2013 23:39 by chillyjames
Initial Code 
span {
    display:block; // because we're using a span class
    white-space: nowrap; //This prevents the content from breaking onto another line
    width: 100%; // this should be the width of your content
    overflow: hidden; // hides the text that is outside of your width
    text-overflow: ellipsis; //creates our ellipsis!
}
Initial URL 
http://docs.tinyfactory.co/css/2012/08/11/text-overflow-ellipsis-using-CSS.html
Initial Description 
The CSS text overflow ellipsis solution is perfect for single line truncations. I use this constantly when building mobile or responsive applications.
Initial Title 
Text Overflow Ellipsis Using Css
Initial Tags 
text
Initial Language 
CSS