css ... 처리

"..." 표출하는 것에 대해 설명드리겠습니다.

주요 css 속성으로 4가지를 사용할 수 있습니다,

첫 번째로 width 속성입니다.

width 속성은 말 그대로 엘리먼트의 가로길이를 정하는 속성입니다.

width 속성이 적용되지 않으면 엘리먼트의 길이를 사용자가 정할 수 없어서

"..." 표출이 제대로 안될 수 있습니다.

두번째로 overflow 속성입니다.

overflow 속성은 표출할 문자열(컨텐츠, 데이터)이 엘리먼트 길이보다 초과할 경우 어떻게 처리할 지에 대한 속성입니다.

overflow 속성값으로 auto, hidden, scroll 등등 여러 가지가 있는데

저희가 사용할 속성값은 hidden입니다.

세 번째로 text-overflow 속성입니다.

text-overflow 속성은 표출되지 않은 문자열(컨텐츠, 데이터)을 어떻게 표출할 지에 대한 속성입니다.

text-overflow 속성 값으로 clip, ellipsis 등등 있습니다.

저희가 사용할 속성 값은 ellipsis입니다.

마지막으로 white-space 속성입니다.

white-space 속성은 공백 문자가 있는 경우 어떻게 처리할 지에 대한 속성입니다.

white-space 속성 값으로 nowrap, prewrap 등등 여러 가지가 있습니다.

여기서 저희가 사용할 속성 값은 nowrap입니다.

그럼 이제 정리하게 되면

width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

이렇게 4가지 css 속성을 이용하면 "..." 처리할 수 있습니다.