PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » CSS » Truncate String with Ellipsis

Truncate String with Ellipsis

All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.

.truncate {
	width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

Subscribe to The Thread

  1. Khalid

    I like this one, but there is no FireFox support for this one.

    Reply ↓
    • Chris Coyier

      The fallback is fine though (in my opinion). It just cuts off.

    • Khalid

      Yes you’re right, but I don’t like the look of it. I used on a site an extra HTML element to make it look better in FF:
      Give the html element the position property ‘absolute’, position it with ‘right: 0′ and give it a width of 20px. Then use ‘background-image: -moz-linear-gradient (…)’ to make a gradient from transparent (I used rgba with opacity 0) to a solid color (the background-color of the element in which the text is placed). If needed adjust the width and add a value for the z-index property.

      Or you could use a PNG image, but that will be visible on all browsers.

      The first solution is a real CSS trick, isn’t it? ;)

  2. Maikel

    This site shows you how to get it working in FF as well.

    http://mattsnider.com/css/css-string-truncation-with-ellipsis/

    It works in IE6.. but not FF.. lame!

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~