친절한효자손 취미생활

어떤 블록 요소에 들어가는 텍스트가 다소 많아서 이것을 생략기호(말줄임표)로 표현하고자 할 때, 우리는 CSS에서 text-overflow 매소드를 사용할 수 있습니다. 어떤 식으로 표현 되는지 간략하게 알아보겠습니다.

 

See the Pen CSS! text-overflow 속성 by rgy0409 (@rgy0409) on CodePen.

 

 

보시면 두 개의 DIV 영역 안에 텍스트가 들어가 있습니다. DIV 영역의 가로값은 모두 300px 로 동일 합니다. 세로값이 auto로 되어 있으므로 텍스트가 300px 이상의 사이즈라면 적색 div 처럼 한 줄 아래로 내려오게 되어 있습니다. 하지만 푸른색 div 박스의 경우는 보시는 것 처럼 텍스트가 생략이 되어 있습니다. CSS 탭을 눌러서 매소드를 살펴 보시기 바랍니다.

 

.a02 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

클래스값이 a02인 div 박스의 CSS 스타일 상태 입니다. 우리는 여기에서 가장 먼저 text-overflow의 속성을 몇 가지 알아봐야 합니다.

 

text-overflow 속성

-text-overflow: clip; ▶ 기본값

-text-overflow: ellipsis; ▶ 텍스트를 생략기호(...)로 표시함

-text-overflow: string; ▶ 텍스트 생략 기호를 string으로 표시함 (현재 지원 브라우저 없음)

-text-overflow: inherit; ▶ 부모 요소를 따름

이 정도의 옵션이 있습니다. 참고로 div.a01의 경우는 text-overflow: clip; 이 생략되어 있다고 보시면 됩니다.

 

이제 다른 두 가지의 매소드를 살펴봅니다. text-overflow: ellipsis; 이 매소드는 단독으로 사용이 안 됩니다. 또한 블록 속성을 가진 태그 요소에서만 사용이 가능 합니다. div는 블록 요소이기 때문에 딱히 display 매소드를 추가하지 않았습니다. 만약 span과 같은 인라인 요소에서 말줄임표를 적용하려고 한다면 display: block; 혹은 display: inline-block; 매소드를 따로 적용해야 할 것 입니다. 그러면 아래에 다시 핵심에 대해 요약해 보겠습니다.

 

-text-overflow: ellipsis; 사용 시 태그 요소는 블록요소여야 할 것.

-text-overflow: ellipsis; 사용 시 overflow: hidden; 과 white-space: nowrap; 를 같이 사용 할 것.

이것을 꼭 기억해 주시면 됩니다. 참고로 white-space: nowrap; 은 텍스트가 부모요소의 가로 크기보다 길어져도 줄바꿈을 하지 않는 매소드 입니다. 그렇기에 한 줄로 고정이 되고 넘치는 부분을 overflow: hidden;으로 생략하여 마무리로 text-overflow: ellipsis;로 말 줄임표를 넣게 되는 것 입니다. 항상 이 세가지 매소드는 묶음으로 같이 들어간다는 것을 잊지 말아 주세요. 끝.

 

 

 

공유하기

facebook twitter kakaoTalk kakaostory naver band