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.

因此，我内心的休息条件永远不会发生。

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

感谢您的时间。

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

Answer 2

我刚修改了你的Js函数，如下所示：

<强> DEMO HERE

$(".maximize_size").each(function(){
    var element = $(this);
    var content=$(this).contents();
    content.wrap('<div class="wrapped"/>');
    var raiseContent=$(this).find('.wrapped');
    var currentSize = 10;
    while (currentSize < 150) {
        raiseContent.css({fontSize:currentSize});
        console.log(raiseContent.height() + " : " + element.height());
        if (raiseContent.height() > element.height())
            break;
        currentSize++;
    }
    element.css({fontSize:currentSize});
    content.unwrap();
});

Answer 3

您需要更改新创建的div的高度。由于您正在检查高度，因此测量值为px。

raiseContent.css({"font-size": currentSize + "px", "height": currentSize + "px"});

http://jsfiddle.net/hfvvvuab/3/

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

3 个答案: