Last Updated: September 04, 2017
·
35.23K
· anasnakawa

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;
}

demo

Reference:
MDN

6 Responses
Add your response

Yeah that's one great hidden gem!
You may want to add -o-text-overflow: ellipsis; for older versions of Opera. Browser support here

over 1 year ago ·
over 1 year ago ·

The best of it is that it propely work with tag closing. http://jsfiddle.net/nxeGZ/12/

over 1 year ago ·

but how if i want to trim 2 line text?

over 1 year ago ·

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.

over 1 year ago ·