[CSS] ellipsis('...') 나타내는 방법

일정범위가 넘는 글자는 자르고 2줄부터 ...이 나타나도록 하고 싶었다.

아래와 같이 코드를 작성하여 다른곳에서 사용시 include를 통해 공통 적용될 수 있도록 만들었다.

@mixin ellipsis($line-cnt) {
  overflow: hidden;
  text-overflow: ellipsis; //...
  letter-spacing: normal;
  word-break: break-word; //줄바꿈시 단어로 쪼개지도록
  overflow-wrap: break-word; //요소내에서 단어 강제 줄바꿈
  display: -webkit-box; //웹킷브라우저-다중 라인 레이아웃
  -webkit-box-orient: vertical; //세로 방향으로 라인배치
  -webkit-line-clamp: $line-cnt; //글 라인 수/clamp:webkit엔진을 사용하지 않는 브라우저에서는 문제가 되기에 line-height,height를 따로 줘야함
  line-height: 1.45;
  max-height: 46px;
}

 

만약 2줄이 아닌 한줄에서 적용시킬 경우는 아래와 같이 사용하면 된다.

   width: 6rem;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;

 

[css] 한 줄, 여러 줄 말줄임