0

我有一段这样的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值的自动换行（上例中的“应用程序”），但由于我添加了最大宽度，它被截断为“应用程序”

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

Applied
History

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

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

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

4

2 回答 2

2

您可以使用 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>在您的代码中添加了一个。

现场示例

于 2013-07-08T18:21:53.897 回答
0

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

max-width做它的工作。它不会让你超出你设定的界限。您可以选择破坏您的单词 ( word-wrap: break-word;)、设置一个更大max-width的 或回退到 JQuery/Javascript 来定义您的自定义规则。

于 2013-07-08T18:12:35.613 回答