HTML Ellipsis using CSS

Posted on
By Addam Driver

For the longest time clients use to always think having an ellipsis “…” would solve all their problems. There are all kinds of back-end and javaScript solutions. There are CSS solutions that are pretty easy to use. Check this code out!

<;style type="text/css">
.myElement{
width:50px;
overflow: hidden;
display: inline-block;
max-width: 90px;
text-overflow: ellipsis;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-moz-binding: url (‘ellipsis.xml#ellipsis’); // fix for firefox
}
<;/style>

WORKING Example:

This is an Ellipsis

So if the text inside of “myElement” goes beyond 50px, it will show an ellipsis. Ex: “This is an Elli…”.

In the case of firefox, you will need to make a reference to some ellipsis.xml file. Not sure why the native code isn’t supported but it’s a workaround. I’m not thrilled with it but hey… it’s better than not having it or having to write out some javascript to do it.

You can download the ellipsis.xml file here

Pretty Neat eh!?

Tags: , , , ,

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CSS Methods

HTML Goodies

JavaScript

mustache

node.js

The HTML Writers Guild IWA