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 사용 See the Pen jQuery ellipsis by jaeheekim ( @jaehee ) on CodePen . 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-o
