On a website I am working on users can add a heading to a section of a page.A simple example:

M11-001 - loss of container and goods from Manchester

With some headings the content can be quite in-depth. In reality, for the heading at least, this content isn't always needed. The first few words would suffice to differentiate between records.

I could just set overflow:hidden to the div and ruthlessly cut of anything outside of the set width.

I would prefer to add ... To the end. Like so:

M11-001 - loss of container...

So three full-stops would be added after either X width or X characters.

Is this possible with CSS, or maybe JavaScript?

On a website I am working on users can add a heading to a section of a page.A simple example:

M11-001 - loss of container and goods from Manchester

With some headings the content can be quite in-depth. In reality, for the heading at least, this content isn't always needed. The first few words would suffice to differentiate between records.

I could just set overflow:hidden to the div and ruthlessly cut of anything outside of the set width.

I would prefer to add ... To the end. Like so:

M11-001 - loss of container...

So three full-stops would be added after either X width or X characters.

Is this possible with CSS, or maybe JavaScript?

• javascript
• css
• xhtml
• text
• html

• 1 Do you mean after X characters or X words? You could use substring and concatenate it with '...'. – pimvdb Commented Apr 18, 2011 at 18:51

1 Answer 1

Something like this? http://www.quirksmode.org/css/textoverflow.html

Text-Overflow

The text-overflow declaration allows you to deal with clipped text: that is, text that does not fit into its box. The ellipsis value causes three periods to be appended to the text.