SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Truncating text to (x) no. of lines

    Hi all

    I'm just wondering if anyone has any ideas on something that's been puzzling me for a short while. I have a box on a website which is populated by a feed, which changes regularly. Because of limited space, I've truncated feed items to only show the first e.g. 150 characters, so only introductory text gets displayed.

    The problem is that the size of 150 characters can vary greatly depending on what letters are being used - sometimes the content can fill all two lines (which is great), and sometimes it only fills one and a bit (which looks odd).

    Does anyone know of a way, using JS, that I can truncate text to just being two lines, regardless of the number of characters?

    Sorry - I don't have a public URL to show as an example. Hope that makes sense, and thanks for your help!

    Nick

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You can use CSS to set the vertical overflow to hidden, so that any excess is automatically dealt with.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set the height of the element to a multiple of the line-height, so a line of text is not cut in half.

    Eg.:
    .truncateClass{position: relative; line-hight:1.25em; height: 2.5em; width: 25%; overflow: hidden;}

  4. #4
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, that's really helpful. I think that truncating this by CSS is indeed the best way. I'd ultimately have liked to have done more fiddly stuff like adding a '...' to the end of the last line (meaning I'd probably have to find a JS solution), but that's not such a big deal, so will probably go with this.

    Cheers again!

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here is CSS String Truncation with Ellipsis which should be able to be made to work as a multi-line situation without too much difficulty.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow - that's fantastic, thanks Paul, will give it a try!


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
  •