Question

我知道有很多类似的帖子，但到目前为止我还没有能够解决这个问题。

上下文：
用户选择一个家，
家庭有独特的标题，
取决于标题，调整字体大小以防止溢出

$(function() {
    var that = $('#title'),
        planName = that.html().length
    ;
    // depending on html length, update font-size
    if(planName > 30) {
        that.css('font-size', '10px');
    } else if(planName > 20) {
        that.css('font-size', '12px');
    } else if(planName > 10) {
        that.css('font-size', '15px');
    }
});

字体的大小根据html长度，但我需要这是反应性的。我尝试创建.on（＆＃34;更改＆＃34;）事件，但未能正确实现。帮助

现在我只是从控制台更新标题，
$('#title').html("big long description thing");

但是，这将通过从将来的模态菜单中选择来完成。

Answer 1

修改

好的，现在我明白了。你的JS应该是这样的：

$(function() { $('#title').on('DOMSubtreeModified', function() { var title = $('#title'), planName = title.html().length; // depending on html length, update font-size if(planName > 30) { title.css('font-size', '10px'); } else if(planName > 20) { title.css('font-size', '12px'); } else if(planName > 10) { title.css('font-size', '15px'); } }); $('li').on('click', function() { $('#title').text( $(this).text() ); }); });

DOMSubtreeModified 应该在元素内容发生变化时触发（因为这会修改DOM子树）。点击＆＃39;点击＆＃39;部分没有必要，但我已将其保留用于测试目的。

根据Dottoro， Opera 不支持此事件， IE 9 及以下可能不支持或有错误。

有关更多选项和信息，请查看以下其他StackOverflow问题：

The question from where I got this solution

Suggestion with Mutation Events API

根据您的说法，用户将选择一个单位＆＃34;：

用例：用户选择一个单位，单位有独特的标题，取决于标题，调整字体大小以防止溢出

因此，您需要在此操作中更改font-size。我用你的代码做了一个例子：

HTML

<ul> <li>On load, font size is set depending on length of title.</li> <li>However, I want this to be reactive...</li> <li>Change the length of Title and hit run</li> <li>Try clicking these itens</li> <li>You will see</li> <ul> TEST TEST 

JS

$(function() { $('li').on('click', function() { var titleEl = $('#title').text( $(this).text() ), planName = titleEl.text().length; // depending on text length, update font-size if (planName > 30) { titleEl.css('font-size', '10px'); } else if (planName > 20) { titleEl.css('font-size', '12px'); } else if(planName > 10) { titleEl.css ('font-size', '15px'); } }); });

尝试单击列表中的itens。你看？作为对＃34;更改单位＆＃34;的回复，标题和字体大小会发生变化。

如果这个答案对您没有帮助，请提供更多详细信息。

Answer 2

我可能会结合使用一些CSS来防止文本被包装，然后我会使用一些脚本来测量渲染文本的长度。如果它比预定的最大宽度长，请使用脚本应用CSS变换。

#title {
  white-space: nowrap;
  display: inline-block; /* necessary for the scale to actually work */
  transform-origin: 0% 100%; /* set transform origin to bottom left corner of the title element */
}

.maxwidth-container {
  width: 400px;
}

然后在你的剧本中：

var scaleTitle = function() {

  var $title = $("#title");
  var maxWidth = $(".maxwidth-container").width();
  $title.css("transform","scale(1,1)"); //reset to normal scale in order to measure natural width

  if ($title.width() > maxWidth) {
    var scaleAmt = maxWidth / $title.width();
    $title.css("transform" , "scale(" + scaleAmt + "," + scaleAmt + ")");
  }

};

在您的情况下，我已将#title元素包装在一个容器中，该容器指示最大大小，但您可以使用明确的设置数量。

每次用户选择住宅时都要调用此功能。

此处示例： https://jsfiddle.net/9uvpun5o/5/

Answer 3

这会有效。请点这个

var planName = $("#title").text().length;

if(planName > 30) {
    $('#title').css("fontSize", "16px");
}else{ if(planName > 20) {
    $("#title").css("fontSize", "12px");
}else if(planName > 8) {
    $("#title").css("fontSize","24px")
}

根据html长度调整字体大小

3 个答案: