CSS - text-overflow: ellipsis; 글자/글씨 자르기 (한줄/여러줄)
2023. 9. 23.
목차
728x90
반응형
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
728x90
반응형