q-a61a
Last Updated: September 04, 2017
·
13K
· anasnakawa
Bd178bca43aaf1ebd472633932a19b6e

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

Say Thanks
Respond

6 Responses
Add your response

3366
D42a7264714dee5006b9c99d2567a320

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 ·
3390
190043 533696520020804 1840519452 n
over 1 year ago ·
3915
over 1 year ago ·
6207
Me

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

over 1 year ago ·
12317

but how if i want to trim 2 line text?

over 1 year ago ·
29271
 logo tf 2014

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.

3 months ago ·