넘치는 텍스트 줄이기 (ellipsis)

한 문장에 들어가야 할 텍스트들이 주로 서버에서 넘어오는 텍스트들이 많기 때문에 여러 줄에서 한 줄로 줄여야 할 때가 많았다.

그럴 때 아주 유용하게 썼던  css가 있는데 난 scss를 사용해서 믹스인을 만들어 사용하니 편했다

 

 overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

word-break: break-all;

 

overflow: hidden;: 영역에서 넘쳐난 글자들을 숨김
white-space: nowrap;: 줄바꿈이 없어짐
text-overflow: ellipsis;: ... 말줄임 효과
word-break: break-all;: 어절이 유지되지 않고 끊어져서 줄바꿈 됨

 

 

여기서 중요한 점 width를 설정해줘야 한다!!

 

그래야 크기에 따라 줄여지는 게 가능해진다 (난 주로 width: 100%로 많이 설정했다)

 

 

 

참고 
https://velog.io/@april_5/CSS-ellipsis-%EB%A7%90%EC%A4%84%EC%9E%84-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0