multiline truncation with JS

index.html

<div class="ellipsis"></div>

multiline-truncation-with-js.markdown

multiline truncation with JS

A Pen by Marina on CodePen.

License.

script.babel

const limitTitle = (title, limit = 150) => {
    // const is correc. We are mutating the array which is stored in the const 
    // same is true of objects
    const newTitle = [];
    if (title.length > limit) {
        //split title on it's words
        //reduce method on resulting array
        //allows for accumulator variable that we can add to in each iteration of the loop where we test if the current title is still under maximum link

        title.split(' ').reduce((acc, cur) => {
            if (acc + cur.length <= limit) {
                newTitle.push(cur);
            }
            return acc + cur.length;
        }, 0);
        //return result
        return `${newTitle.join(' ')} ...`
    }
    return title;

};

let title =`<p style="width:20%;">Lorem ipsum dolor amet tbh listicle vinyl, normcore lumbersexual wayfarers swag. Hashtag cliche readymade gochujang narwhal austin, ramps etsy fingerstache woke. PBR&B single-origin coffee everyday carry, tumeric ramps franzen sriracha kogi aesthetic cred authentic fingerstache. Man braid subway tile pork belly lo-fi kinfolk. Ugh stumptown +1 bicycle rights distillery truffaut, selvage chambray adaptogen before they sold out artisan vegan. Selvage cliche truffaut celiac leggings whatever.</p>`


document.querySelector('.ellipsis').innerHTML =limitTitle(title, 100);