Trim text using only CSS ... even in IE!
The css property text-overflow has seen a lot of improvements in css3, but what shocked me is that this property has been around since IE6 (with basic support), and it does what we need in most cases (trim the text if it grows bigger than a specific width and placing a trailing dots ... to indicate text has been trimmed)
html
<h1 class="trim-text">Bite Me!</h1>css
.trim-text {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h1 {
max-width: 100px;
}Reference:
MDN
Written by Anas Nakawa
Related protips
6 Responses
Yeah that's one great hidden gem!
You may want to add -o-text-overflow: ellipsis; for older versions of Opera. Browser support here
He're some examples of usage:
http://davidwalsh.name/sliding-links
http://designitcodeit.com/item/notifications
PPK on the subject: http://www.quirksmode.org/css/textoverflow.html
The best of it is that it propely work with tag closing. http://jsfiddle.net/nxeGZ/12/
but how if i want to trim 2 line text?
Nice demo of truncating text with ellipsis!
In programming, the english worn "trim" refers to the removal of trailing and/or leading whitespace. What is shown here is truncation. Not trying to be a d*ck grammar cop, or petty; proper terminology is fundamental to search.
For example, I need to TRIM text with CSS, and the title read like this ought to be relevant.
