[SCSS] text-overflow - 넘치는 텍스트 표기

글자수 제한 및 잘린 문자 ...로 변환

text - overflow - 넘치는 텍스트 표기

 

*추가로 정리해야할 부분

-webkit-line-clamp , -webkit-box-orient, -moz-box-oreint / 줄바꿈 크로스 브라우징

 

개념

text-overflow는 white-space를 이용해 줄바꿈을 하지 않을 때 넘치는 텍스트 처리를 어떻게 할 것인지를 처리하는 속성이다. 

 

속성

clip	넘치는 텍스트를 자름
ellipsis	말 줄임표로 잘린 텍스트가 있다고 표시

 

표시방법 그림

 

속성 설명

1. text-overflow: clip;

div 너비를 고정시키고 텍스트를 길게 입력했을 때, overflow: hidden과 white-space: nowpre로 설정하게 되면, 넘치는 텍스트는 자르게 된다.

 

2. text-overflow: ellipsis;

ellipsis로 설정하게 되면 글씨가 넘쳐서 잘라지는 부분에 말 줄임표(...)가 붙으면서 잘린 텍스가 있다는 것을 표시해 준다.

 

 

사용 방법

단일라인

.line {
	display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

 

멀티라인

@mixin multiLines($lineCnt, $lineHeight) {
	overflow: hidden;
    text-overflow: ellipsis;
    display: webkit-box;
    -webkit-line-clamp: $lineCnt; // 최대 줄수
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: $lineHeight;
    height: $lineHeight * $lineCnt;
}

.line {
	@include multiLines(최대 줄 수, 한 줄 높이);
}

 

참고

https://hwanlee.tistory.com/64

-webkit-line-clamp 속성 사용시 주의사항

https://velog.io/@minjuice/CSS-%EB%A7%90%EC%A4%84%EC%9E%84-webkit-line-clamp

[CSS] 말줄임 webkit-line-clamp

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=htmlstory&logNo=80192584519 

css3 문법 익히기 [box에 관한 속성]