[프로젝트] 게시판 | 7. 말줄임 기능 만드는 법

 

위와 같이 콘텐츠 영역을 넘어가는 글자 수 일 경우 말 줄임표 표시를 할 수 있다.

자바스크립트의 substr을 활용하여 간단하게 구현해보자.

 

완성코드

<script>
  // 말줄임 기능
  let titles = document.querySelectorAll(".topPostsTitle")
  let contents = document.querySelectorAll(".topPostsContent")
  let length = 10

  titles.forEach((title) =>{
    let titleText = title.textContent
    if(titleText.length > length) {
      titleText= titleText.substr(0, length) + "..."
    }
    title.textContent = titleText; // 변경된 값을 대체
  })

  contents.forEach((content) =>{
    let contentText = content.textContent
    if(contentText.length > length) {
      contentText= contentText.substr(0, length-2) + "..."
    }
    content.textContent = contentText; // 변경된 값을 대체
  })
</script>

 

- substr(시작위치, 시작위치로 부터 가져오는 글자수)

titleText= titleText.substr(0, length) + "..."

- 위의 예제에서는 처음 10글자만 까지만 끊고 이 이상은 '...' 처리하고 있다.