728x90
위와 같이 콘텐츠 영역을 넘어가는 글자 수 일 경우 말 줄임표 표시를 할 수 있다.
자바스크립트의 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글자만 까지만 끊고 이 이상은 '...' 처리하고 있다.
728x90
반응형
'프로젝트 > SSR 게시판' 카테고리의 다른 글
[프로젝트] 게시판 | 8. 게시물 댓글 수 보여주기&댓글 기준으로 인기 게시물 보여주는 법 (1) | 2024.01.19 |
---|---|
[프로젝트] 게시판 | 6. 기존 이미지 그대로 저장하기 및 이미지 미리보기(프리뷰) 삭제하는 법 (1) | 2024.01.13 |
[프로젝트] 게시판 | 트러블슈팅-Argument passed in must be a string of 12 bytes of 24 hex characters or an integer (1) | 2024.01.06 |
[프로젝트] 게시판 | 5. 글 작성자만 수정, 삭제 버튼 보이게 만드는 법 (0) | 2024.01.06 |
[프로젝트] 게시판 | 4. 채팅 유저의 프로필 이미지 보여주기 & 프로필이 상대방 것인지 여부 체크하는 법 (1) | 2024.01.06 |