Title and excerpt length with lines count

  • Resolved MI

    (@mariukas)


    10 years, 11 months ago

    Hi,

    I want to display post in box. The thing is that i want to do so:
    I need to check if title fits to div width and how much lines does it have:

    If title fits to 1 line -> show content_excerpt max 7 lines (if longer add “…” at end.
    If title fits to 2 lines -> show content_excerpt max 6 lines (if longer add “…” at end.
    If title fits to 3 lines -> show content_excerpt max 5 lines (if longer add “…” at end.
    If title fits to 4 lines or more -> add “…” to the end and limit it to 3 lines + show content_excerpt max 5 lines (if longer add “…” at end.)

    Any thoughts how to make it work?

    Tried with php and strlen, but it’s not bulletproof and the solution to count lines would be much better.

    Thanks,
    Marius

Viewing 5 replies - 1 through 5 (of 5 total)
  • C W (VYSO)

    (@cyril-washbrook)

    If I’ve understood what you want to do correctly, then as far as I can see the only “bulletproof” way to achieve this is on the client side.

    With some rather hack-ish techniques you could probably get something rudimentary working with pure CSS, but your best bet is to use JS. I can’t vouch for any particular solution and you should do your own research, but something like this may be what you are looking for.

    Thread Starter MI

    (@mariukas)

    Oh cool! thanks for the link ?? It’s a good start, I will try that JS.

    Thread Starter MI

    (@mariukas)

    Tried out dotdotdot. Really cool js plugin. It solves everything well except the title max lines. But actually it’s quite good solution for me. Thanks Cyril and happy new years ??

    C W (VYSO)

    (@cyril-washbrook)

    You should be able to make it work for the title in particular, as long as you surround it with distinct tags (e.g. <h2></h2>) and make a line-height declaration.

    For example, if you define the line-height of h2 as 25px, then you will know that three lines will have a height of 75px. At that point, it becomes a simple matter of putting something like this into your CSS:

    h2 {
   font-size: 20px;
   line-height: 25px;
   max-height: 75px;
}

    And adding this to your dotdotdot function:

    $('h2').dotdotdot();

    (You should probably assign a special class though, otherwise these settings will obviously apply to every <h2> on the page.)

    Thread Starter MI

    (@mariukas)

    Oh cool. I didn’t tried that, but the solution looks like working. Anyway i decided to leave it with the default dotdotdot solution, because i think it’s even better to show full title instead of “…”.

    Thanks. Marking as solved and happy new years ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Title and excerpt length with lines count’ is closed to new replies.