[CSS] 일정 크기 이상 넘어가는 텍스트를 ...로 표시하기

결론 코드

style="white-space: nowrap; overflow:hidden; text-overflow: ellipsis;"

---

기존 상태

8글자가 넘어가는 품종의 경우에 다음줄로 넘어가는 상태

넘어가는 글자의 경우 ...으로 처리하고 싶어

일정 크기 이상 넘어가는 텍스트를 ....로 표시하기 - hong's blog

이 분의 글을 보고 컨테이너에 style 추가

<div class="container" style="white-space: nowrap;overflow:hidden;text-overflow: ellipsis;">

수정 상태

왜인지 ...으로 변하지는 않았지만 한 줄로 이쁘게 들어간 모습이다.

좀 더 긴 친구가 어떻게 보이는지 임의로 테스트를 해봤는데

???

오잉 ...이 안먹히네

컨테이너 말고 글자태그에 바로 집어넣어보았다

<h4 class="card-title" style="white-space: nowrap;overflow:hidden;text-overflow: ellipsis;">이탈리안 그레이 하운드</h4>

완성

오홍 잘 되는구만!!!