Premium Theme Support › SiloCreativo › Rosalie

Reduce the word count before the "read me" button

  • Author
    Posts
  • #160191
    rjsblogs
    Member

    I have moved another of my four blogs to your theme but need to make a small change.

    Can I reduce the word count before the “Read more” button? I’d like to make it about half the count that it is now.

    The blog I need help with is: (visible only to logged in users)

    #160202
    ricardpriet
    Theme Author

    Hello there!

    Yes, in this case CSS can help :)
    Add the following CSS:

    .entry-summary p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    Just customise the number of lines you want to show: 4 in the example. If you need more or less, just change this value.

    Hope this helps :)
    best, Ricardo

    #160205
    rjsblogs
    Member
    Original poster

    Thanks Ricardo for the code. After I entered the code it worked fine but when I exit the site and come back in.

    The two lines
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;

    are missing from my css and it goes back to the original long text?

    do you understand why that is happening??

    #160214
    ricardpriet
    Theme Author

    Hi,
    what a strange issue. It seems that WordPress doesn’t let us save that CSS value, but it should let us use that. I’m going to add a WordPress staff member in order to take a look to this issue.

    In the meanwhile you can add this CSS that feature a similar result: https://i.imgur.com/1fQ89CG.png

    .entry-summary p {
    max-height: 90px;
}

.entry-summary a.more-link:before {
    content: "";
    background-color: #efeaea;
    background: linear-gradient(180deg, rgba(239,234,234,0) 0%, rgba(239,234,234,1) 100%);
    left: 0;
    bottom: 38px;
    width: 100%;
    height: 110px;
    position: absolute;
    cursor: default;
}

    Please let me know if this works.
    Thank you again!
    Ricardo P.

    #160216
    rjsblogs
    Member
    Original poster

    I know being a retired database developer, you guys need a challenge once in a while to put some spark in your day. This is proving to be one of those sparks 😉

    The temporary code you provided moved the “Read More” button up but left the rest of the text below the button. Let me know when you have the final solution. I can wait for that.

    Thanks for the efforts…

    #160217
    rjsblogs
    Member
    Original poster

    OOPS. The temp code did work. I just put it on the wrong blog! I put on https://rjsview by mistake and it didn’t have the original fix code. Thanks for the code and am looking forward to seeing the final solution.

    #160237
    ricardpriet
    Theme Author

    Fantastic!

    Yes, hope a WordPress staff member could see it soon.

    Have a nice week :)

    Best,
    Ricardo

    #160418
    danieldudzic
    Staff

    Hi @rjsblogs and @ricardpriet,

    The WordPress.com CSS editor strips out vendor prefixes like -webkit- (because no prefixed properties are on our whitelist). I’d recommend using the alternative solution provided by @ricardpriet.

    Cheers!
    Danny

  • The topic ‘Reduce the word count before the "read me" button’ is closed to new replies.