Using Ellipsis in CSS

It can be a bit tricky getting CSS ellipsis working, so here’s a simple example:

ellipsis

<div class="container">
    <span class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    <span class="ellipsis">Aliquam finibus quam eu neque bibendum, vestibulum auctor nisl gravida. Quisque fermentum a eros sed rutrum.</span>
</div>
.container {
    background-color: #CCC;
    width: 300px;
}
.ellipsis {
    display: inline-block;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

I’ve created a JSFiddle example.

Advertisements
This entry was posted in Reference, Tips and Tricks. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s