根据 html 长度调整字体大小

Question

我知道有很多类似的帖子，但我至今没能解决这个问题。

上下文：
用户选择一个家，
房屋有独特的标题，
根据标题，调整字体大小以防止溢出

JS 小提琴：https://jsfiddle.net/9uvpun5o/3/

$(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("change") 事件，但未能正确实施。帮忙？

现在我只是从控制台更新标题，
$('#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 子树）。 “点击”部分不是必需的，但我将其保留用于测试目的。

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

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

• The question from where I got this solution
• Suggestion with Mutation Events API

---

如你所说，用户将“选择一个单元”：

用例： 用户选择单位， 单位有独特的头衔， 根据标题，调整字体大小以防止溢出

因此，您需要在此操作中更改字体大小。我用你的代码做了一个例子：

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>
<br/><br/>
<span id="title">TEST TEST</span><br/>

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');
        } 
    });
});

尝试在列表中单击。你看？作为对“更改单位”的回应，标题和字体大小会发生变化。

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

Answer 2

这会起作用。试试这个

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")
}

Answer 3

我可能会结合一些 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/