CSS - text-overflow: ellipsis; 글자/글씨 자르기 (한줄/여러줄)

닌니디자인 CSS 썸네일

text-overflow: ellipsis;

CSS에서 "ellipsis"는 텍스트가 요소의 영역을 벗어날 때 사용되는 효과이다. 이를 사용하여 긴 텍스트를 축약하고 생략 부호 (...)를 추가하여 사용자에게 더 많은 정보가 있음을 알리는 데 도움이 준다. 요소에 적합하지 않는 긴 텍스트를 축약하고, 요소의 크기 내에 맞출 수 있다.

예시

/* 한줄 자르기 */
.text { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    word-wrap: normal; 
}

/* 여러줄 자르기 */
.text { 
    white-space: normal; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; /* 숫자를 바꿔주면 원하는 줄대로 글자가 잘린다.*/
    -webkit-box-orient: vertical; 
}

 

 

속성

white-space

요소 내부의 공백을 처리하는 방법을 지정한다.

normal	일련의 공백이 단일 공백으로 축소됩니다. 필요한 경우 텍스트가 줄바꿈된다. (기본값)
nowrap	일련의 공백이 단일 공백으로 축소됩니다. 텍스트는 다음 줄로 넘어가지 않는다. <br/> 태그가 나타날 때까지 텍스트는 같은 줄에 계속된다.
pre	공백은 브라우저에 의해 유지된다. 텍스트는 줄바꿈 시에만 줄바꿈됩니다. HTML의 <pre> 태그처럼 작동한다.
pre-line	일련의 공백이 단일 공백으로 축소된다. 필요한 경우 텍스트가 줄 바꿈되고 줄 바꿈이 이루어진다.
pre-wrap	공백은 브라우저에 의해 보존됩니다. 필요한 경우 텍스트가 줄 바꿈되고 줄 바꿈이 이루어집니다.

 

 

overflow

콘텐츠가 요소의 상자를 넘으면 어떻게 되는지 지정한다. 이 속성은 요소의 콘텐츠가 너무 커서 지정된 영역에 맞지 않을 때 콘텐츠를 자를지 아니면 스크롤 막대를 추가할지를 지정한다.

new_releases Tip

※지정된 높이를 가진 블록 요소에만 작동.

 

visible	오버플로가 잘리지 않는다. 요소의 상자 외부에 렌더링된다. (기본값)
hidden	오버플로가 잘리고 나머지 콘텐츠는 표시되지 않는다. 프로그래밍 방식으로 콘텐츠를 스크롤할 수 있다. (예: scrollLeft 또는 scrollTo() 설정).
clip	오버플로가 잘리고 나머지 콘텐츠는 표시되지 않는다. 프로그래밍 방식 스크롤을 포함한 스크롤을 금지한다.
scroll	오버플로가 잘리지만 나머지 콘텐츠를 볼 수 있도록 스크롤 막대가 추가된다.
auto	오버플로가 잘린 경우 나머지 콘텐츠를 보려면 스크롤 막대를 추가해야 한다.

 

 

text-overflow

표시되지 않는 오버플로된 콘텐츠를 사용자에게 알리는 방법을 지정한다. 잘리거나 줄임표(...)를 표시하거나 사용자 정의 문자열을 표시할 수 있다. text-overflow 에는 다음 속성이 모두 필요하다.

• white-space: nowrap;
• overflow: hidden;

clip	텍스트가 잘려서 액세스할 수 없다. (기본값)
ellipsis	잘린 텍스트를 나타내기 위해 줄임표("...")를 렌더링한다.

 

 

word-wrap

긴 단어가 분리되어 다음 줄로 넘어갈 수 있도록 허용한다.

normal	허용된 중단점에서만 단어를 중단한다. (기본값)
break-word	깨지지 않는 단어를 깨뜨릴 수 있다.

 

 

---

 

domain_verification Source

CSS text-overflow property