WordPress.org

1. rsqviper
   Member
   Posted 1 year ago #
   

   So, I have my next/Previous posts setup to show the titles. but if a title is long, then the post titles are more than 1 line and it looks ugly.

   How do I make something like this:

   Previous Title name . Next Title
   Name

   look like this:

   Previous Title name . Next Ti...

   This is my current code:

   <center><p style="font-size: 150%;"><?php previous_post_link('<strong>%link</strong>'); ?> • <?php next_post_link('<strong>%link</strong>'); ?></p> </center>

   And here is my site and a page with my problem on it:

   EXAMPLE POST

   Thanks!

2. egado
   Member
   Posted 1 year ago #
   

   well... you can use the "css only" way... but the cross browser support is'nt that good...
   http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

   or you can use a jquery solution
   http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

3. rsqviper
   Member
   Posted 1 year ago #
   

   So how would the code look, exactly because I can't get either way to work?

4. egado
   Member
   Posted 1 year ago #
   

   1. We need to add a class to grab these links, so add this to your functions.php

   add_filter('next_posts_link_attributes', 'posts_link_attributes_1');
   add_filter('previous_posts_link_attributes', 'posts_link_attributes_2');
   
   function posts_link_attributes_1() {
       return 'class="prev-post"';
   }
   function posts_link_attributes_2() {
       return 'class="next-post"';
   }

   2. add this to your style.css
   

   .prev-post, .next-post  {
       width: 255px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       -o-text-overflow: ellipsis;
       -ms-text-overflow: ellipsis;
       display: inline-block;
   }

   Tell if it works for you...

5. rsqviper
   Member
   Posted 1 year ago #
   

   Yeah, that didn't work. Does it matter where I put it in those sheets?

   I'll post what I have for whole sheets if it helps.

   You'll notice I lowered the style.php set to 10px. That was just to try and see it work at all and it still didn't take affect. When it didn't work at 255, I punched that in just to test.

   functions.php

   [code moderated - use the pastebin for any code over the forum limit of 10 lines]

   style.css (Stylesheet)

   [CSS code moderated - a link to your site is enough to access the styles]

   And, here is my full single post single.php

   [code moderated - use the pastebin]

   Thanks for the help!

6. egado
   Member
   Posted 1 year ago #
   

   Hm... your code looks good, can't see anything wrong.

   But the code you've added in your functions.php does'nt take effekt, no idea why, is the code actually still there or have you deleted it?

   And I'cant find the css code you've added in your style.css on your website right now, have you deleted it? If not, please try to add it in the user.css instead of the style.css

   But we first need to get the functions.php code working :/

7. rsqviper
   Member
   Posted 1 year ago #
   

   Yup, it's still there. Just added the code in style.css to user.css as well.

   The functions.php code is still there, too. Not sure why it isn't taking affect.

   I am going to delve into my actual files thru filezilla and see if something stupid is happening.

8. egado
   Member
   Posted 1 year ago #
   

   Let me know :)
   There must be something, couse in your online user.css is'nt the css you pasted: http://www.rsqcast.com/blog/wp-content/themes/arras/user.css

   //EDIT
   now its there... but i can not see if your functions.php is correct uploaded... but the code wont work actually :)

9. rsqviper
   Member
   Posted 1 year ago #
   

   Yeah, I am looking at the raw files on the site and they are what is pasted above. Very strange.

   Is there, by any chance, an incorrect word or use of word in any of the syntax?

10. egado
    Member
    Posted 1 year ago #
    

    Maybe, but it works me.
    Ok, lets try another solution... can you please post again your single.php through http://pastebin.com/ ? the code above has been moderated :(

11. rsqviper
    Member
    Posted 1 year ago #
    

    Sorry I disappeared. Had to step out with the wife.

    Here's my single.php

    http://pastebin.com/iNzLs697

12. egado
    Member
    Posted 1 year ago #
    

    Ok, lets try this solution.

    1. Delete the code you have added to your functions.php (we wont need it anymore)
    2. Replace your single.php with this one: http://pastebin.com/DXsWkTjD
    3. Change the CSS Code in your user.css to this
    

    .prev-next-post-links  {
        width: 255px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
        display: inline-block;
    }

    Let me know :)

13. rsqviper
    Member
    Posted 1 year ago #
    

    That didn't seem to make any change. *sigh*

    I don't know what is wrong. The Arras Theme may be just taking over something here.

14. rsqviper
    Member
    Posted 1 year ago #
    

    Just letting you know that it is now working! Thanks for the help, man!

15. egado
    Member
    Posted 1 year ago #
    

    What was the final solution? :)

16. rsqviper
    Member
    Posted 1 year ago #
    

    It was your last solution but even a cache clear didn't show it. I edited my code with an adsense and it appeared. Then I increased the px to 600 and it was good!

    Thanks again!

Topic Closed

This topic has been closed to new replies.