Ellipsis

[stijn0713]

Hi guys,

 

Does anybody have a good (i.e. standardized, cross compatible) solution for adding an ellipsis and cutting of text after the div is 'full'.

 

My div has these properties and i want to cut of the text with a read further link

 

width: 220px;
height: 180px;
border: 1px dashed green;
padding: 10px;
overflow: hidden;
line-height: 26px;
font-family: Velvet;

[Jessica]

To add the ellipsis you either need to:

a. Use Javascript

b. Use PHP

c. Use an image

 

You cannot do it in CSS alone.

[Adam]

You can use text-overflow, but it's relatively new so support isn't great. I'm not too keen on how it looks though, you'd get a better effect using a background image on a fixed width and/or height DIV.

[Mahngiel]

Like Adam said, CSS support for this is definitely slow. The biggest hurdle is that unless you're using a monospaced font, neither a PHP nor JS approach will work 100% of the time with an absolutely defined element size. You can get relatively close, so it's best to keep it flexible with something like a min-height or similar.

[spiderwell]

here is a pure CSS solution for you:

 

overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;width: 100%;

[Mahngiel]

Firefox doesnt have support for this yet

[Adam]

Works fine for me in FF and I'm still on v13: http://jsfiddle.net/Btr8f/

[Mahngiel]

touche, apparently its been supported since v7... my bad