javascript - 使用 jQuery 最大化元素内的文本

Question

我正在做一个函数，它接受所有带有 class="maximize_size"的元素，并在每个元素内尽可能大地最大化其内容(文本)。

如果我能用 css 技巧做到这一点，我会很高兴，但我没有找到方法。

因此，我正在尝试使用 javascript/jquery 来实现...但我坚持了一点:

$(".maximize_size").each(function(){
    var element = $(this);
    var content = element.contents();

    var raiseContent = $("<div></div>");
    content.wrap(raiseContent);

    var currentSize = 10;
    while (currentSize < 150) {
        raiseContent.css({"font-size": currentSize + "px"});
        console.log(raiseContent.height() + " : " + element.height());
        if (raiseContent.height() > element.height())
            break;
        currentSize++;
    }

    element.css({"font-size": currentSize + "px"});
    content.unwrap();
});

当我使用 console.log(raiseContent.height()) 它显示总是 0 !!!

FIDDLE here.

因此，我在 while 内的中断条件从未发生。

如果你能给我一些指导，我会很高兴。

感谢您的宝贵时间。

Answer 1

您不需要添加额外的元素。只需将容器的 scrollHeight 与其 height() 进行比较即可:

$(".maximize_size").each(function(){
  var element = $(this),
      currentSize = 10;

  while (currentSize < 150) {
    element.css({"font-size": currentSize + "px"});
    if(element[0].scrollHeight > element.height()) {
      break;
    }
    currentSize++;
  }

  element.css({"font-size": currentSize +  "px"});
});

Fiddle