Home | About Chris Hope | Contact Chris Hope | Search:

Using ellipsis with HTML and CSS

Posted December 5th, 2009 in HTML and CSS and Javascript

If the text is too wide to fit into a container, a nice solution can be to have ellipsis to show there's more information available. While not currently part of the official HTML specifications, it is possible to have ellipsis defined in CSS and it works for Internet Explorer, Safari, Chrome and Opera. It doesn't work for Firefox but there's a workaround that can be done with jQuery.

Example

In the following example the text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis interdum imperdiet. Cras dictum sapien id dolor convallis ut fringilla ipsum tincidunt." is too big to fit into the container so it's truncated and ends with an ellipsis. Note that I've added a grey border around the text to illustrate where the boundaries of the displayed area of the paragraph is.

The first example shows the text not fitting the container, and without the ellipsis styling. I hope you find this information helpful and that it solves your problem! The whole point of this blog is to generate ideas and provide some online education and tips for web programming, Linux and Windows tricks, etc. So feel free to share, to give feedback or send in questions. Thank you!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis interdum imperdiet. Cras dictum sapien id dolor convallis ut fringilla ipsum tincidunt.

The second example shows it with ellipsis. If you are viewing this in Firefox it will not work if you do not have Javascript enabled.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis interdum imperdiet. Cras dictum sapien id dolor convallis ut fringilla ipsum tincidunt.

The above won't work if you are reading this is a feed reader so please click through to view this in a web browser instead.

The CSS to add ellipsis

The following CSS is needed to add the ellipsis if the text overflows the container:

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;

The overflow propery is required and needs to be set to anything other than the default visible.

white-space: nowrap is also required; if the text can wrap, even if it is not visible, it will not add the ellipsis because the text is not wider than the container (it wraps!)

The width property is only needed if supporting Internet Explorer 6, although in many cases you'll want to have a set width anyway. If the container is expected to fill the entire width of the parent container then ensure you have width:100% (or similar) for dealing with IE6.

text-overflow: ellipsis is what does the magic. It's not currently part of the HTML specification and was introduced in Internet Explorer. It works in IE from at least version 6, Safari from at least version 3.2 and Google Chrome.

-o-text-overflow: ellipsis is how to make it work in Opera. This works from at least Opera 9.0.

Using jQuery for Firefox

As mentioned at the start of this post, Firefox does not support the text-overflow property at all. However, it's possible to work around this with Javascript instead and I present here a method using jQuery. This post uses the jQuery method as well as the CSS method so the example above will work if you are viewing this page in Firefox.

Download the jQuery ellipsis plugin by Devon Govett. This is a pretty clever plugin and will only do the transformation if the browser does not support the text-overflow or -o-text-overflow properties.

Now it's simply a matter of assigning the "ellipsis" class (or some other class name or #element of your choosing) to the elements that should have ellipsis like so:

$(document).ready(function() {
    $('.ellipsis').ellipsis();
}

 

Comments

blog comments powered by Disqus