JAVASCRIPT - 2021. 5. 11.

Javascript 말줄임 처리하기

안녕하세요 TriplexLab 입니다 :)
오늘은 간단하게 javascript로 말줄임 처리하는 방법에 대해서 살펴보겠습니다.

✍️ Javascript 말줄임 처리 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="tit">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reprehenderit consequatur</div>
        <div class="tit">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reprehenderit consequatur</div>
        <div class="tit">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reprehenderit consequatur</div>
        <div class="tit">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta reprehenderit consequatur</div>
    </div>
    
    <script type="module" src="./index.js"></script>
</body>
</html>

특정 엘리먼트 요소를 셀렉하고, 배열로 만들어서 반복으로 조회하면서, 텍스트 몇번째에
텍스트에 끝부분에 '...'을 붙이는 방법입니다.

맨 하단에 함수를 호출해서 인자 2번째에 원하는 n째 숫자를 넣어주시면 그 부분 붙어 짤리는것 입니다.

const boxTit = Array.from(document.querySelectorAll('.tit')); 
const box = [];

const textSlice = function(tits, lengths){
    tits.forEach((el, idx) => {
        const tix = el.textContent;
        const memberPart = tix.slice(0, lengths);
        const t = memberPart.concat('...');
        box.push(t);

        tits[idx].innerHTML = box[idx];
    });
};

textSlice(boxTit, 30);

위에 코드를 파일로 제공합니다.
필요하신분들은 다운받아서 Test해보세요~