... Line Clamp & Truncate

CSS 시리즈는 Scss를 사용하는 것을 전제로 진행된다.

Line Clamp

Line Clamp 는 라인이 두 줄을 넘어갈 시에 CSS 속성을 활용하여 ... 으로 처리해주는 것을 의미한다.

이에 대한 상세한 설명은 css-tricks_line-clamp 을 참고한다.

참고로 truncate , truncation 은 1 열의 길이가 콘텐츠 박스의 길이를 넘어가지 않도록 ... 으로 처리 해주는 것이고,
Line Clamp 는 1열 이상일 때의 상황을 주로 얘기한다.

Line Clamp 는 다음처럼 처리해줄 수 있다.

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

이제 아래와 같이 두 줄을 넘어갈 시 ... 으로 처리를 해준다.

Truncate

Truncate 는 다음과 같은 상황을 방지하고자 할 때 사용한다.

Truncate 는 다음처럼 처리해줄 수 있다.

@mixin truncate() {
  overflow: hidden;
  text-overflow: ellipsis;   // text가 overflow 되면 ... 처리해줌
  white-space: nowrap;   // 무조건 1열로만..
}

위의 코드를 적용시켜주고 나면 다음과 같이 깔끔하게 1열로 떨어진다.

정리하자면 Truncate 는 1열일 때 글자가 터져나가면 안되니, ... 으로 처리해주는 방법이다.