我需要向CSS类添加哪些规则/声明才能启用不带单个单词截断的单词换行

Question

我有一段html，如下所示：

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

类别CSS类是：

.category {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 2em;
    color: Orange;
    max-width: 180px;
}

我希望将HTML的这一部分保持在最大宽度，从而启用#prizeCategory值（上例中为"Applications"），但由于我添加了最大宽度，它被截断为"Applicatio"

当有多个单词时，我需要该值来换行，但忽略最大宽度，如果不适合，则显示完整的值。IOW，值"Application"应在一行显示"Application"的全文，但值"Applied History"应在两行显示，如：

Applied
History

IOW，大多数hmtl5部分的宽度相同，但有些部分会更长，以容纳作为"prizeCategory"元素值的长单词。

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

jsfiddle在这里：http://jsfiddle.net/clayshannon/zhTNS/1/

Answer 1

您可以使用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>

我在您的代码中添加了一个<span>。

实例

Answer 2

据我所知，你不能这么做。

max-width完成了它的工作。它不会让你超过你设定的界限。您可以选择打破单词（word-wrap: break-word;），设置更大的max-width，或者返回JQuery/Javascript来定义自定义规则。