根据 html 长度调整字体大小

Question

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

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

JS Fiddle: 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 子树）。 'click' 部分不是必需的，但我保留它用于测试目的。

根据Dottoro，Opera不支持此事件，IE 9及以下可能不支持或越野车。

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

根据您所说，用户将 "select a unit":

use case: User selects a unit, units have unique titles, depending on title, resize font to prevent overflow

因此，作为此操作的一部分，您需要更改 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>
<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');
        } 
    });
});

尝试点击列表中的项目。你看？作为对 "changing the unit" 的回应，标题和 font-size 发生了变化。

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

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

This will work.TRy this

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 长度调整字体大小

Resizing font based on html length

javascript

css

jquery

font-size