Html 我需要向CSS类中添加哪些规则/声明才能在没有单个单词截断的情况下启用单词换行？

我有一段html，如下所示：

<div id="prizeCategory" class="category">Applications</div>

我希望将HTML的这一部分保持在最大宽度，从而启用

#prizeCategory

值（“上面示例中的应用程序”），但由于我添加了一个最大宽度，它会被截断为“application”

当有多个单词时，我需要单词换行符的值，但是忽略最大宽度，如果不适合，则显示完整的值。注意，“应用程序”的值应在一行显示“应用程序”的全文，但“应用历史”的值应在两行显示，如下所示：

Applied
History

从外观上看，大多数hmtl5部分的宽度相同，但有些部分会更长，以容纳一个长单词作为“prizeCategory”元素的值

我想知道我是否必须每次计算#prizeCategory元素值的长度，并根据该长度更改一些属性/使用不同的类（有点像“内部媒体查询”）

---

JSFIDLE在这里：

据我所知，您不能这样做

max width

起作用。它不会让你超过你设定的界限。您可以选择断开单词（

wordwrap:break-word；

），设置更大的

最大宽度，或者返回JQuery/Javascript来定义自定义规则。
您可以使用JQuery：

    $(function () {
      while ($('.category span').width() > $('.category').width()) {
        $('.category span').css('font-size', (parseInt($('.category span').css('font-size')) - 1) + "px");
      }
    });

更新的HTML：

<div id="prizeCategory" class="category"><span>Applications</span></div>

应用程序

我在您的代码中添加了一个

我只想在短语超过我想要的一般宽度时将其打断。瞧，我不想打断“如果我是一只蜜蜂”这个短语中的每一个词，但是，我想打断“非自愿的牛屠宰”或“非自愿的牛笑”（“非自愿的”在第一行，“牛笑”在第二行）。我明白了。那个么破口大骂对你们并没有帮助，但不管怎样，我的答案都站得住脚。您不能仅使用CSS来实现这一点。
<div id="prizeCategory" class="category"><span>Applications</span></div>