Using Ellipsis in CSS

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


<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>
.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.

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: Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s