End long text with "..."

HTML & CSS
1

I’m wondering if there is a way to automatically put “…” on the end of very long text e.g

instead of

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

2

Hi,

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
    white-space:nowrap;
    width:300px;
    -o-text-overflow:ellipsis;
    text-overflow: ellipsis;
    border:1px solid #000;
    padding:10px;
    overflow:hidden;
}
</style>
</head>
<body>
<p>ellipsis added when text gets cuts short at the end of the line</p>
</body>
</html>

Won’t work in Mozilla and the css3 draft seems to be in flux also.

3

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 :slight_smile:

4

Thanks :slight_smile:

Any idea of how I would do it with javascript?

5

Maybe something like this.

6

there is this for mozilla, although I have no idea whats going on. http://basis.et-lab.ru/habrahabr/ellipsis/step4.html

and there is this little snippet that does NOT have to use prototype or jquery http://www.visibilityinherit.com/code/javascript/shortlinks.js As is, it’s setup to look for links and truncate them. Someone that new some JS could easily edit it so that it looks for a class instead of links (http://www.). Any takers???

7

It binds an xml file to the style that basically appends the div for the ellipses.


<binding id="ellipsis" applyauthorstyles="false">
    <implementation>
        <constructor><![CDATA[
            (function(block){
                setTimeout(function(){
                    block.style.mozBinding = '';
                      var t = document.createElement('DIV');
                    block.appendChild(t);
                    block.appendChild(document.createElement('DIV'));
                    while (block.firstChild != t)
                          t.appendChild(block.firstChild);
                    block.className = block.className + ' moz-ellipsis';
                }, 0);
            })(this);
        ]]></constructor>
    </implementation>
</binding>

</bindings>
8

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

9

Thanks Eric:) - I did see that method in a link here if anyone wants to know how it works.

10

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!