After 'X' amount of characters, put '...'

Discussion in 'Web Design and Development' started by MegaMan1311, Nov 16, 2007.

  1. MegaMan1311 macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #1
    I am writing a script that pulls in my site's RSS and displays it to the user as html in a nice looking box. Due to the small size of this box (only 180 px), the rss titles go to the edge and cuts off the last few letters, making it look odd...

    So, for the title "My Really Really Really Long Title", it would show this:

    |------------------------------|
    |My Really Really Really Lo|
    |------------------------------|

    I want it to remove all characters after a certain amount of characters and put a ... after it so that it would display:

    |--------------------------|
    |My Really Really Rea...|
    |--------------------------|

    How would I do that? I'd prefer not to edit my current code and just add more if possible. Does that make sense? Thanks in advance!

    I'm writing it in javascript and html and the file type is a .html. I've seen it done in javascript before, so I know it is possible, but I don't remember where or how they did it...
     
  2. rhoydotp macrumors 6502

    rhoydotp

    Joined:
    Sep 28, 2006
    #2
    what type of script are you writing (ie, perl, php, java, sh, etc ...)?
     
  3. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #3
    Ah... Sorry about that. I guess I should have told you. I am writing it in html and javascript.
     
  4. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #4
    You haven't actually said which code you are writing it in so it is hard to be specific…

    The basic idea I would have is this though:

    [1] Take the string "My really long title"
    [2] Split the string (substr function in php) so you only have the first x number of characters and assign this cut down version to a variable.
    [3] Add the ellipsis to variable created above.
    [4] Output the result.

    The complication will arrive if the string you are dealing with contains any kind of markup (HTML, markdown etc).
     
  5. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #5
    Check the post above yours. I'm writing it in javascript and html and the file type is a .html. I've edited the 1st post with it.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Essentially you can use something like this.
    Code:
    var theString = "My Really Really Really Long Title";
    if (theString.length > 18) {
      theString = theString.substring(0, 15) + "...";
    }
    You can customize this as need be. Though note that if the user increases the font size in the browser it can still make it look messy.
     
  7. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #7
    Thanks, but I do not think it will work. However, I had forgotten that I had a PHP backend that I could possibly use to accomplish this. (How did I forget this?) Do you think you could give me a php equivalent of that javascript code you gave me that I could use for it? I think that the following line could help you figure out the variable to use.

    $my_title = addslashes(strip_returns($item['title']));

    Thanks in advance!
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    PHP equivalent from my JavaScript from before,
    PHP:
    $my_title addslashes(strip_returns($item['title']));
    if ( 
    strlen($my_title) > 18 ) {
      
    $my_title substr($my_title015) . "...";
    }
     
  9. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #9
    I didn't know php had an inbuilt function called strip_returns… What does it do and where can I find the documentation?
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    I copied that part from the OP, he'll have to let you know. Might be a function he created. You can also check this page, especially the comments, http://us2.php.net/trim
     
  11. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #11
    The original poster hasn't specified any code.
     
  12. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #12
    That worked perfectly. Thank you! :D

    It is part of the rss parser I am using. It helps parse the rss feed. Also, I have specified a part of my code in post 7. That is not the complete code though.
     
  13. kainjow Moderator emeritus

    kainjow

    Joined:
    Jun 15, 2000
    #13
    You can also do something similar via CSS using the text-overflow property.
     
  14. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #14
    Well that only works for IE as one of their proprietary features. Though a potential, though haven't tried it, is to us a background image and place it at the right, but I have doubts about that. One of the comments on that page also suggested using the :after and content features to add a ... after it, but I tested that and it didn't work. The PHP way is probably one of the easier solutions as far as I can think of.

    Glad the PHP worked for you.
     

Share This Page