Remove ellipsis from truncated text

1 Comments

  • Socorro Fernandez

    Hey Frank,

    I was working on this for awhile and was not having much success. Both in setting up my section page as you described to test and in removing the ellipsis using css etc. 

    It almost seems as if using the excerpt strips out all the html as noted in the documentation but then defaults to browsers properties. Not 100% sure if this is why trying css and anything else was not allowing a text-overflow value and defaults to the browsers, which more than likely is ellipsis for overflow.

     

    With that, I was able to get a work around by assigning a class around the excerpt and using a script to delete the last 3 characters of anything in that class. Yes, it will show the ellipsis for just a second, depending on how long it takes the page to load and the script to run:

    HTML: 

    <p class="yourclassname">{{excerpt article.body}}</p>

    You could put the JS Script at the very end of your section page but you would just need to wrap it in <script>:

    <script>

    $(".yourclassname").text(function(i, text) {
    return text.slice(0, -3);
    });

    </script>

    Of course, you could instead add the script to your JS file without the <script> wrap.

    The -3 part of the script is how many characters are being removed from the end of the class. You can adjust as needed.

     

    Here are some screenshots as reference:

    Without Script:

    With Script:

     

    I hope this can at least get you started. Please let me know if you have any questions. Thanks!

    0

Please sign in to leave a comment.

Powered by Zendesk