[CSS] 말줄임 처리하기

CSS에서 말줄임 처리를 하는 두 가지 방법.
아래 코드는 mixin으로 만들어서 사용한 예시. 상황에 맞게 사용할 것.

 

📌 한 줄로 보이는 텍스트를 말줄임표 처리할때는 [ truncate ]

@mixin truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

📌 여러 줄로 보이는 텍스트를 말줄임표 처리할때는 [ line-clamp ]

@mixin line-clamp($line) {
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

자꾸 쓰다보면 익숙해질테니 불안해하지말고 기록하자!🔥