SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    end long text with "..."

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could use text-overflow:ellipsis for IE and safari(and opera 10 with vendor extension).

    Code:
    <!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. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    Any idea of how I would do it with javascript?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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/cod.../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. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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.
    Code:
    <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. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It binds an xml file to the style that basically appends the div for the ellipses.
    Code:
    <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>
    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/pro...ipsis-demo.php

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks Eric - I did see that method in a link here if anyone wants to know how it works.

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is a pure css solution I just came up with. http://www.visibilityinherit.com/pro...psis-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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •