WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Any way to shorten page title/links on pagination? (10 posts)

  1. Agnes
    Member
    Posted 1 year ago #

    Am I the only one to have a nice 'next post title' link get crumbled when it is too long?
    See here:
    http://www.morija.co.ls/the-mohlomi-memorial-lecture-series/

    I have the next_posts_link and previous_posts_link used on a pagination for both pages and posts. Looks good, but when the posts titles are too long, it gets terrible. I checked the codex and other posts and can't find anyone to help how to shorten the links.
    I can use by CSS, buth then won't get a '...' at the end of a shortened title

    Any suggestion?

  2. cinghaman
    Member
    Posted 1 year ago #

  3. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    You can use CSS and have the '...'
    use

    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;

    Play around with the width.

  4. Agnes
    Member
    Posted 1 year ago #

    Thanks a lot for the suggestions!
    Robin, do you know of the plugin still works with newer versions? It seems pretty old and not in the plugin rpository...?
    Agnes

  5. cinghaman
    Member
    Posted 1 year ago #

    This is from where he started off, someone had the same issue as u and so he ended up putting that thing into a plugin

    http://wordpress.org/support/topic/substr-still-echoing-whole-string-help?replies=8

    he has explained the function in the support thread so you can play it around with it

  6. Agnes
    Member
    Posted 1 year ago #

    The plugin still works very fine :)
    Thanks a lot, Agnes

  7. cinghaman
    Member
    Posted 1 year ago #

    cheers :)

  8. Agnes
    Member
    Posted 1 year ago #

    Thanks Andrew:I had not realized the CSS works brilliatntly too!
    Agnes

  9. Agnes
    Member
    Posted 1 year ago #

    Hello guys

    I implemented Andrews' CSS stuff nicely here on the bottom pagination links ('lookout...')
    http://www.morija.co.ls/the-mohlomi-memorial-lecture-series/

    I tried to use the same to limit teh text displayed on mouseover iof a thumbnail here:
    http://www.morija.co.ls//museum/collections/historical-archives/
    But I don't get the final '...' there, I can't figure out why...
    It is a CSS that appleis to a text (h2+excerpt)
    It has this:

    .items-list .item-thumbnail-text{/*ALP adding overflow */
    color:#666;
    padding: 5px 4px 4px 4px;
    display: block;
    width: 168px;
    height: 130px;
    line-height: 1.5em;
    text-overflow: ellipsis;
    overflow: hidden;
    }

    Any idea?

  10. Agnes
    Member
    Posted 1 year ago #

    Andrew may I ask your help...

    Using the CSS method above to trim a title works fine for a A-line text, as the ellipsis works when the width is defined I believe.

    I am now trying to limit the space used by a comment in a list (I want to limit it to 2 lines), and I use a block with hidden overflow. However, I can't get the ellipsis to show here...
    Any suggestion?

    Thanks a lot , Agnes

    #tf_tabs_2 div.comment-preview { /* ALP for FB comments*/
    display: block;
    line-height: 20px;
    height: 40px;
    text-overflow: ellipsis;
    overflow: hidden;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.