Question

正如标题所述，我希望根据div中的行数和起始大小来减少字体。 （每行减少字体）。

下面的函数是我所拥有的，并根据div的高度进行工作。

$.fn.resizeText = function (options) {  

    var settings = $.extend({ maxfont: 40, minfont: 17 }, options);

    var style = $('<style>').html('.nodelays ' +
    '{ ' +
        '-moz-transition: none !important; ' +
        '-webkit-transition: none !important;' +
        '-o-transition: none !important; ' +
        'transition: none !important;' +
    '}');

    function shrink(el, fontsize, minfontsize)
    {
        if (fontsize < minfontsize) return;

        el.style.fontSize = fontsize + 'px';            

        if (el.scrollHeight > el.closest(".container").offsetHeight) shrink(el, fontsize - 1, minfontsize);
    }

    $('head').append(style);

    $(this).each(function(index, el)
    {
        var element = $(el);

        element.addClass('nodelays');

        shrink(el, settings.maxfont, settings.minfont);

        element.removeClass('nodelays');
    });

    style.remove();
}

Answer 1

您要查找的大小是相对于字体系列的，因为如果在同一文本中使用不同的字体测试行数，则行号不一定总是相同。使用以下解决方案：

How can I count text lines inside an DOM element? Can I?

这是一个近似的解决方案，考虑了最大行数

<body>
  <div id="content" style="width: 80px; font-size: 20px; line-height: 20px; visibility: hidden;">
    hello how are you? hello how are you? hello how are you? hello how are you? how are you? how are you? how are you?
  </div>
  <script>
  function countLines(elm) {
    var el = document.getElementById(elm);
    var divHeight = el.offsetHeight;
    var lineHeight = parseInt(el.style.lineHeight);
    var lines = divHeight / lineHeight;
    return lines;
  }

  var max_lines = 10;

  function auto_size_text(elm) {
    var el = document.getElementById(elm);
    var lines = countLines(elm);
    var size = parseInt(el.style.fontSize.replace("px", ""));
    if(lines > max_lines) {
       size--;
       el.style.fontSize = size + "px";
       el.style.lineHeight = size + "px";
       auto_size_text(elm);
    }
  }

  function show_div (elm) {
     var el = document.getElementById(elm);
     el.style.visibility = "";
  }
  auto_size_text("content");
  show_div("content");
  </script>
</body>

根据div行数减少字体大小

1 个答案: