Html 使用CSS按其父容器的宽度剪切文本

我的文本当前超过了填充的宽度（如果父对象的宽度最多为14%），因此它超出了填充范围。我想根据家长的宽度来切掉这段文字

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

圣诞节快到了

如何获取此信息？

使用

---

.progress fill{overflow:hidden；}

或（）

---

.progress fill{word wrap:break word；}

.progress fill{overflow:hidden；}