Angular2+ 에서 넘치는 글자 말줄임표(...) 처리하기

Angular2+ 에서 말줄임(...) 처리는 크게 세 가지로 할 수 있습니다.

1. Pipe 로 템플릿 단에서 처리

2. 스크립트 처리

3. CSS 로 처리
1줄일 경우, 2줄 이상일 경우 다른 방법이 쓰입니다.

이 세 가지에 대해 간단한 핵심 소스를 공유 드립니다.


1. Pipe

*.ts
str:string = '일이삼사오육칠팔구십'

*.html
<div> {{ (str.length>6)? (str | slice:0:6)+'...':(str) }} </div>

결과화면
일이삼사오육...



2. 스크립트 사용

*.ts
var limitLen = 6;

if (str.length > length) {
     str = str.substr(0, limitLen) + '...';
}

*.html
<div> {{ str }} </div>

결과화면
일이삼사오육...



*jquery ellipsis 사용




2. CSS 사용

1줄일 경우

div {
   white-space:nowarp; /* 줄바꿈 막음*/
   text-overflow:ellipsis; /* ... 로 보이게 */
   overflow:hidden;
}


2줄 이상일 경우

div {
     font-size:1em;
     overflow:hidden;
     text-overflow:ellipsis;
     line-height:1.5;
     height:3em;  /* line-height의 두 배 */
     display:-webkit-box;
     -webkit-line-clamp:2; /* 나타낼 글자 라인 수 */
     -webkit-box-orient:vertical
}



2줄인데 영문 + 한글이 섞여 있어서 높이값을 정해주면 아래쪽이 잘려보이는 등 약간 까다로운 경우

가 이번에 생겨서 다른 쇼핑몰들 소스를 참조해 보았는데요,
마법의 비율(?)을 찾아낸 듯한 소스가 있어서 적용해 보았더니 해결되었습니다.

폰트도 주의해야 하는 것 같더라구요. font-family에 한글이 지원되지 않는 영문 폰트를 지정한 다음, 한글과 영문이 뒤섞어 쓰면 line-height가 맞지 않아 잘려보일 수도 있는 것 같습니다.


*.html
<div class="items">
      <p class="name">긴 상품 이름</p>
</div>

*.css

.items {
     text-align: -webkit-match-parent;
}
.items .name {
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     height: 2.82rem;
     font: 1.11rem/1.45rem 'AvenirNext-Regular', 'AppleSDGothicNeo-Light';
     text-overflow: ellipsis;
}