[CSS] 글자 말 줄임 처리(feat. 반응형)

 

 

 

안녕하세요. 제니입니다!

오늘은 자주 쓰는 글자 말 줄임 처리에 대해 정리해보려고 합니다.

기존에 많이 사용하고 있긴 했는데,

다시 사용할 때마다 구글링을 해서 적용을 했었는데요.

대부분의 구글링에서 적용하는 방법을 하게 되면

width를 고정해서 정리해두었거나

또는 max-width로 해두었지만 반응형이 고려되지 않는 경우더라구요.

 

 

 

그렇게 되면, 처음에는 문제가 없지만

추후 화면이 줄어들었을 때 줄어들지 않는 문제가 생길 수 있습니다!

 

 

 

1. 코드를 비교해보기

1-1. 구글링했을 때 많이 나오는 코드 방식

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
max-width: 520px;

 

 

 

대부분 이렇게 max-width를 주거나 width를 고정값을 주게 되는데요.

이렇게만 하게 되면

 

 

 

 

반응형 체크

이렇게 반응형이 되지 않는 모습을 보실 수 있어요.

 

 

 

1-2. 구글링 더 해보기 + chat gpt의 답은 ?

 

 

 

flex-shrink: 1;

 

 

 

더 검색해보면 flex-shrink를 주라고 하는 경우도 있는데,

이 경우에도 동일하게 적용되지 않습니다.

 

 

 

2. 반응형까지 적용되게 하려면

 

 

 

flex: 1;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-break: break-all;

 

 

 

이렇게 정리할 수 있습니다!

width, max-width의 값을 주지 않아도 감싸고 있는 div 영역을 flex: 1 로 꽉 채우고

반응형 주고 싶은 말 줄임 div에도 flex: 1 을 주게 되면 영역의 width를 채울 수 있구요

만약 max-width가 필요한 경우라면 max-width정도는 줄 수 있고

 

 

 

word-break: break-all;

 

 

 

word-break를 적용해주어야 반응형까지 무리 없이 처리되는 것을 보실 수 있습니다!

 

 

 

 

 

반응형 체크2

오늘의 정리 끝!