[CSS] ellipsis 기능 / 넘치는 문장 말줄임으로 표시하기

 

디자인적인 측면에서 말줄임(...)을 사용해야 하는 경우가 생긴다.

말줄임표를 사용하면 해당 문장이 사실은 더 긴 문장이고 생략되었다라는 것을 암시해주는 역할을 할 수 있다.

 

👨‍🦰  white-space

원래 설정된 디폴트는 width를 넘어갈 경우 줄바꿈이 자동으로 되는데
white-space가 이 줄바꿈을 설정해주는 거다.

 

white-space:normal;로 할 경우 일반적인 줄바꿈이 되고 

white-space:nowrap;으로 하면 줄넘김이 되지 않음

👨‍🦰 text-overflow
텍스트가 넘치는 부분을 어떻게 처리할 지 관여하는 기능

 

 

white-space:nowrap;  👉 줄넘김 하지 마세용

overflow:hidden;    👉  설정한 div 넓이보다 길어지면 안 보이게 하세용

text-overflow:ellipsis;  👉 줄넘김 처리를 말줄임으로 해주세용

text-overflow:clip; 👉 그냥 컷!!! 잘라버려용