How do I indicate long text into a smaller fixed column with CSS?

css string truncate
Primoz Rome picture Primoz Rome · Jan 21, 2010 · Viewed 30k times · Source

How do I fit long text into a fixed width column where I have room for only one line of text? The text needs to be cut to a fixed width (lets say to 100px) and I would like to add dots "..." at the end. Something like this for example:

Given string:

Some really long string that I need to fit in there!

Desired output in fixed-width-column should be:

Some really long string...

Answer

Gordon picture Gordon · Jan 21, 2010

You can do this with CSS alone:

.box {
    -o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    width: 300px;                 /* fixed width */
}

Note: You will want to check on the latest browser support.

Related questions

How can I force a long string without any blank to be wrapped?

I have a long string (a DNA sequence). It does not contain any whitespace character. For example: ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA What would be the CSS selector to force this text to be wrapped in a html:textarea or in a xul:textbox?

Read More
wordwrap a very long string

How can you display a long string, website address, word or set of symbols with automatic line breaks to keep a div width? I guess a wordwrap of sorts. Usually adding a space works but is there a CSS solution …

Read More
Why doesn't word-wrap work properly in CSS3?

Why doesn't word wrap property work properly in the example below? http://jsfiddle.net/k5VET/739/ What can I do to ensure that part of the word 'consectetur' fits in the first line itself? I want maximum number of characters …

Read More