[CSS] 말 줄임 표시하기 (... 표시)

한 줄로 줄임 CSS

다음은 텍스트가 한 줄이 넘어갈 때

... 표시로 말줄임 표시를 하는 CSS 코드이다

 

.title {
  // 넘어가는 텍스트를 표시하지 않음
  overflow: hidden;
  // 텍스트가 넘어가면 ...으로 표시함
  text-overflow: ellipsis;
  // 텍스트가 넘어가도 줄 바꿈을 하지 않음
  white-space: nowrap;
}

 

n 줄로 줄임 CSS

다음은 텍스트가 넘어갈 때 n번째 줄에서

... 표시로 말 줄임 표시를 하는 CSS 코드이다

.title {
  // webkit-box 기능 이용 (Flexible Box Model)
  display: -webkit-box;
  // 한 줄과 동일
  overflow: hidden;
  // 한 줄과 동일
  text-overflow: ellipsis;
  // 박스의 내용을 세로로 배치함
  -webkit-box-orient: vertical;
  // n줄 말줄임을 설정
  -webkit-line-clamp: 2;
  // 줄 바꿈이 발생할 수 있게 설정
  word-break: break-all;
}