안녕하세요~

이번 글에서는 제가 후니블로그를 만들면서 겪었던 이슈와 어떻게 해결했는지를 공유하려고 합니다!

마주한 이슈

저의 메인페이지에서 post item들마다 타이틀이 있는데 이 타이틀이 적정 width를 벗어나면 ... 이 나오게하는

text-overflow: ellipsis 처리를 하려고 했습니다

저는 그냥 무난하게 title 박스에다가

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

이 스타일언어를 추가하면 될 줄 알았습니다! 하지만 white-space: nowrap css 가 먹질 않고 그냥 쭉 넘어가버리는 이슈가 발생하는거였습니다! ㅠㅠ ( 당황 )

도대체 왜 그런지 찾아보다가 단순히 부모 box에 grid-template-columns 를 사용할때 1fr를 넣으면 white-space: nowrap 을 적용했을때 width가 완벽하게 고정되어있지 않아 nowrap이 먹히지 않는다는 것을 알았습니다!

 grid-template-columns: repeat(3,1fr)

해결 방법

해결 방법은 간단합니다 minmax 0을 추가해주면 됩니다.

grid-template-columns: repeat(3,minmax(0, 1fr));

그러면 잘 적용되는 모습을 확인 할 수 있습니다.

감사합니다!