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-orient:vertical
}
2줄인데 영문 + 한글이 섞여 있어서 높이값을 정해주면 아래쪽이 잘려보이는 등 약간 까다로운 경우
가 이번에 생겨서 다른 쇼핑…
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-orient:vertical
}
2줄인데 영문 + 한글이 섞여 있어서 높이값을 정해주면 아래쪽이 잘려보이는 등 약간 까다로운 경우
가 이번에 생겨서 다른 쇼핑…