使用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; }