상위 컨테이너의 너비에 따라 CSS로 텍스트 자름

Question

현재 채우기 폭을 초과하는 텍스트 (부모의 너비가 최대 14 % 인 경우)가 채우기에서 벗어납니다. 부모의 너비에 의존하여 그 텍스트를 자르고 싶습니다.

<div class="progress-fill"> 
    <div class="progress-text">Christmas is Coming Soon</div> 
</div> 

어떻게 만드나요?

Answer 1

사용 중 .progress-fill { overflow: hidden; }

또는 (CSS3) .progress-fill { word-wrap: break-word; }