계발하는 개발자

아래 같이 화면 줄어듦에 따라 넘치는 텍스트는 ... 으로 처리하고 싶은데 text-overflow: ellipsis 적용이 안될 때의 해결 방법 정리에 관한 글이다. 적용에 앞서, 먼저 체크해봐야 할 부분이 있다. 1. width가 제대로 설정되어 있는지 2. block태그이거나, 혹은 display: block/ inline-block 처리가 되어 있는지(flex는 적용 안됨) 3. 글자가 width를 넘어가는 조건을 충족시켰는지 위 조건들을 모두 만족하는데도 text-overflow: ellipsis 속성 적용이 안된다면 숨기려는 텍스트 요소에 아래 부가적인 속성들을 더 추가해서 해결할 수 있다. p { padding: 4px 0 5px; letter-spacing: -1.5px; font-fami..