HTML & CSS
I'm wondering if there is a way to automatically put "..." on the end of very long text e.g
Here is a very very very very very very very very long example
automatically shorten it to a set width e.g
Here is a very very ve...
Preferably use css but if not possible then it don't matter.
p.s i'm using ASP.NET if i makes any difference
You could use text-overflow:ellipsis for IE and safari(and opera 10 with vendor extension).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
border:1px solid #000;
<p>ellipsis added when text gets cuts short at the end of the line</p>
Won't work in Mozilla and the css3 draft seems to be in flux also.
Other then the way Paul pointed out you would probably have to rely on some JS to get it working in Mozilla and other browsers that this isn't supported in
there is this for mozilla, although I have no idea whats going on. http://basis.et-lab.ru/habrahabr/ellipsis/step4.html
It binds an xml file to the style that basically appends the div for the ellipses.
<binding id="ellipsis" applyauthorstyles="false">
block.style.mozBinding = '';
var t = document.createElement('DIV');
while (block.firstChild != t)
block.className = block.className + ' moz-ellipsis';
Ahh - OK - thanks Paul! But that one is dependent on JS, so no better than the jQuery ones.
Here it is cross browser in it's most simplest form (NO JS). http://www.visibilityinherit.com/projects/ellipsis-demo.php
Thanks Eric:) - I did see that method in a link here if anyone wants to know how it works.
Here is a pure css solution I just came up with. http://www.visibilityinherit.com/projects/ellipsis-demo2.php
Works well, except for it will cut off half a letter now and then (in FX only). But hey - it's all css!