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

[MegaMan1311]

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...

 

[rhoydotp]

what type of script are you writing (ie, perl, php, java, sh, etc ...)?

 

[MegaMan1311]

Ah... Sorry about that. I guess I should have told you. I am writing it in html and javascript.

 

[elppa]

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).

 

[MegaMan1311]

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.

 

[angelwatt]

Essentially you can use something like this.

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.

 

[MegaMan1311]

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!

 

[angelwatt]

PHP equivalent from my JavaScript from before,

$my_title = addslashes(strip_returns($item['title']));
if ( strlen($my_title) > 18 ) {
  $my_title = substr($my_title, 0, 15) . "...";
}

 

[elppa]

PHP equivalent from my JavaScript from before,

$my_title = addslashes(strip_returns($item['title']));
if ( strlen($my_title) > 18 ) {
  $my_title = substr($my_title, 0, 15) . "...";
}

I didn't know php had an inbuilt function called strip_returns… What does it do and where can I find the documentation?

 

[angelwatt]

I didn't know php had an inbuilt function called strip_returns… What does it do and where can I find the documentation?

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

 

[elppa]

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

The original poster hasn't specified any code.

 

[MegaMan1311]

PHP equivalent from my JavaScript from before,

$my_title = addslashes(strip_returns($item['title']));
if ( strlen($my_title) > 18 ) {
  $my_title = substr($my_title, 0, 15) . "...";
}

That worked perfectly. Thank you!

The original poster hasn't specified any code.

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.

 

[kainjow]

You can also do something similar via CSS using the text-overflow property.

 

[angelwatt]

You can also do something similar via CSS using the text-overflow property.

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.