根據div行數減少字體大小

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

您要查找的大小是相對於字體系列的，因為如果在同一文本中使用不同字體測試行號，則行號不一定總是相同。 使用以下解決方案：

如何計算DOM元素內的文本行？ 我可以嗎？

考慮到最大行數，這是一個近似解決方案

 <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 個解決方案

解決方案1
0 2019-07-14 15:55:34

根據div行數減少字體大小

問題描述

1 個解決方案

解決方案1 0 2019-07-14 15:55:34

解決方案1
0 2019-07-14 15:55:34