Limit total tags in the_content

Question

I am using the_content to display content in a custom theme, but I am running into an issue.

Right now, I have some JS code that removes the <br> tags and replaces them with </p><p> tags, so each line is a new paragraph:

const d = Array.from(document.querySelectorAll('.content__main'));

for (let e of d) {
    let old = e.innerHTML;
    e.innerHTML = '';
    
    for (let line of old.split("\n")) {
        let cleaned = line.replace(/<\/?[^>]+(>|$)/g, "").trim();
        if (cleaned !== '') {
            let newE = document.createElement('p')
            newE.innerHTML = cleaned;
            e.appendChild(newE);
        }
    }
}

I have the_content in a slider and it's working great! The issue I am facing is setting a limit on it. So, I found: https://wplancer.com/how-to-limit-content-in-wordpress/ which allows me to limit the_content without using the get_the_content approach, that way my existing JS script will continue to work and my HTML tags do not get stripped.

This works, however, it sometimes breaks in the middle of a sentence because it filters based on the amount of words:

function the_content_limit($max_char, $more_link_text = '(more...)', $stripteaser = 0, $more_file = '') { 
    $content = get_the_content($more_link_text, $stripteaser, $more_file); 
    $content = apply_filters('the_content', $content); $content = str_replace(']]>', ']]>', $content); 
    $content = strip_tags($content); 
    if (strlen($_GET['p']) > 0) { 
        echo ""; echo $content; echo " "."Read More →"; echo ""; 
    } else if ((strlen($content)>$max_char) && ($espacio = strpos($content, " ", $max_char ))) {
        $content = substr($content, 0, $espacio); $content = $content; echo ""; 
        echo $content; 
        echo "..."; 
        echo "".$more_link_text."
            "; echo ""; 
    } else {
        echo ""; echo $content; echo "
            "."Read More →
        "; echo "";
    }
}

But I was hoping, there would be a way to filter this by the amount of P tags.

The HTML looks like:

<p>Test</p>
<p>Frog</p>
<p>Duck</p>

So, I was thinking I could specify a number like 2 and it would show Test and Frog completely (everything in that P tag) - then exclude duck and put a Read More link there.

I have seen lots of tutorials that limit the amount of characters or the amount of words, but I haven't found anything that would limit the amount of P tags.

Can anyone point me in the right direction?

Thanks,
Josh

Answer 1

I was looking into this because all of the text was not showing on my slider, and the slider had a height set with overflow: hidden. I didn't think there was a simpler solution than to create a filter for the_content until I stumbled across this one...

It's a css solution :-) All I am doing is using nth-child to display the first five items, then hide the rest:

#main p:nth-child(1n+6) {
    display: none;
}

This is a great solution, because I can use media queries to change the amount I show based on screen size, that way I don't have to have one magic number and it'll look good on large or small screens.

Hopefully this helps someone else trying to do the same thing.

Thanks,
Josh