Hacking and Gonzo, a publication by Amir Salihefendic since 2000

Truncating text using only CSS

Here's how you can truncate text using only CSS. It works in IE 6+, Safari 4+, Firefox 7+, Opera 11+ and Chrome 10+:

.link_truncated {
    text-overflow: ellipsis;
    display: inline-block;
    width: 275px;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
}

How it looks like when rendered:

Truncating text with CSS only

30. Nov 2011 • Code · Code improvement