Search code examples
javascriptcsscss-selectorshideellipsis

Delete/Hide last X amount of characters in <p> tag

I'm using a WP plugin and had no luck exploring source code specific to the plugin (Blog Filter Premium). It is automatically adding an ellipsis to the end of my description in a <p> tag, however, I don't believe it is using any CSS to do this as the ellipsis are actually in the html/paragraph itself.

<p class="blog_description">Here is an example of my description with a period at the end and then subsequent ellipsis automatically being added....</p>

Is there a way with CSS or to inject <script> into the <head> to have my .blog_description paragraphs remove the final 3 characters or hide them? Or at the very least color them white so that I can get rid of these ellipses?

Solution

  • I suppose you could split the string by the delimeter ('...'), remove the last item, then join it back together again.

    let srch = '...';
document.querySelectorAll('.blog_description').forEach(el => {
  if (el.innerText.indexOf(srch) > -1) el.innerText = el.innerText.split(srch).slice(0, -1).join(srch);
})
    <p class="blog_description">Here is an example of my description with a period at the end and then subsequent ellipsis automatically being added...</p>