SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2002
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Truncate text after a certain pixel width

    I was wondering if anyone knows of a way to truncate text after a certain pixel width. I found many scripts to truncate after a set amount of characters, but @@@@@ and lllll are very different pixel widths, so that wont work for my website. Ive tried searching with no avail..


    Any help would be very appreciated!

    Ex:

    before:
    Hello! This website is very neat and fun.
    after:
    Hello! This website...

    before:
    @@@@@@@@@@@@@@@@@@@@@
    after
    @@@@@@@@@...

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't think of a way to do this. Javascript can tell you the width of an element (using el.offsetWidth) or the number of characters, but I don't think you can tie the two together in the way you want. The only way to do it accurately would be to use a monospaced font.

  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    function trimElement(hoo,wid){
    var w= parseInt(hoo.offsetWidth);
    if(w<wid) return;
    var who=hoo.lastChild;
    while(who && who.nodetype!==3 || who.data==''){
    who=who.previousSibling;
    }
    var str=who.data;
    while(str && parseInt(hoo.offsetWidth)>wid){
    who.data=str.slice(0,-1);
    }
    who.data+='...';
    }
    hoo should be an inline element, if it isnt,
    create a child span element and move the element text into it.
    (set white-space to 'pre' to avoid wrapping)
    Last edited by mrhoo; Oct 4, 2006 at 10:37.

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Internet explorer can use the text-overflow attribute to do this automatically
    Code:
    <html>
    <head>
    <style type="text/css">
    .short {
    	width: 80px;
    	overflow: hidden;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    	background: #EEEEEE;
    }
    </style>
    </head>
    <body>
    <div class="short">This is some fairly long text</div>
    </body>
    </html>

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2002
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is exactly what I want. Do you know if there is a cross browser version?

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There isn't, sorry.

    Check this out though:
    http://blog.360.yahoo.com/blog-ktYYK...yv2QSL0-?p=120


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
  •