CSS 말줄임표 사용하기

아래 이미지와 같이 ...으로 긴 글을 줄여서 보여주는 방법을 알아보자

코드 보기

display: -webkit-box;
word-wrap: break-word;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

코드 설명

• displaly: -webkit-box; : -webkit-line-clamp를 사용하기 위해 지정한다.
• word-wrap : 박스 가로 너비 영역을 벗어난 단어의 분리를 결정하는 속성이다.
  • normal : 단어 기준으로 분리한다.
    
    
  • break-word : 단어를 분리한다.
    
    
• word-break : 단어 단위로만 끊는다면 안써도 된다. 하지만 아래와 같은 경우가 생길 수 있다.(엄청 긴 한 영어단어)
  
  • normal : 단어를 기준으로 끊는다. 한글은 한 글자씩 끊어진다.
  • break-all : 한 글자를 기준으로 끊는다.
  • keep-all : 단어를 기준으로 끊는다. 한글도 단어 기준으로 끊어진다.
• -webkit-line-clamp : 화면에 보여줄 줄 수를 설정한다.
• -webkit-box-orient : 요소를 수평으로 배치할 지, 수직으로 배치할 지 결정한다. 이 속성을 vertical로 해야 -webkit-line-clamp 속성이 작동한다.
• overflow : overflow를 hidden으로 처리해야 가로 너비를 넘어간 문자들이 보이지 않는다.
  • visible : 그대로 노출
  • hidden : 보이지 않기(코드를 사용해 스크롤 할 수 있다고 한다.)
  • clip : 잘라내기(코드를 사용한 스크롤도 불가능)
  • scroll : 스크롤(가로,세로 스크롤 모두 생긴다.)
  • auto : 브라우저에서 결정한다.
• text-overflow : 박스 가로 너비를 넘어간 경우 어떻게 처리할 지 설정한다.
  • clip : 잘라내기
  • ellipsis : 말줄임표 처리(...)

출처)
CSS - 여러 줄 말줄임(...) 표시 - webkit-box
word-break 속성과 word-wrap 속성 알아보기
w3schools - CSS word-wrap Property
mdn - overflow
mdn - text overflow