왜 text-overflow ellipsis 가 동작하지 않는거지??

가끔 그럴 때가 있습니다..

잘 사용하던 친구가.. 동작하지 않을 때가..
물론 제대로 알고 사용하던게 아니라서 그런 것이겠지요
이번도 그랬습니다.

text-overflow: ellipsis; 가 동작을 하지 않는 문제였습니다.
처음에는 mdn text-overflow를 보며 작성합니다.

.ellipsis {
     overflow: hidden;
    white-space: nowrap;
      text-overflow: ellipsis;
}

여기서 문제는 위 코드들이 문제가 아니였어요..

code-sandbox

위와 같은 문제와 넘치는데 ellipsis가 적용되지 않는 문제가 있었어요!
그래서 다시 mdn을 살펴봤습니다.

The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).

text-overflow 속성은 인라인 진행 방향에서 블록 컨테이너 요소를 오버플로하는 콘텐츠에만 영향을 줍니다(예: 상자 하단에서 텍스트 오버플로가 아님).

그랬습니다... block 요소를 깜빡했던거에요..
display: block; 을 설정하여 부랴부랴 정상 동작을 확인했습니다..

다음부터는 더 꼼꼼히 봐야지..