如何使用javascript自动缩小文本以适合div的宽度和高度？

Question

我从我的数据库加载信息，我放在绿色框内（图片中）。如果文本不适合绿框div，因为它太长，我怎样才能使用javascript调整文本大小？此外，文字可以在多行上，而不仅仅是1.我在网上看到了很多答案，但最让我的绿箱div的位置和大小搞得一团糟。我应该提一下，如果文本已经适当地适合div，我不想缩小它。我希望它有默认大小。

@page_title

Answer 1

这是一个解决方案。它有两个迭代，允许文本换行并防止长字溢出...

我在父width上设置了min-height和div，并将文本包装在span标记中。这允许div与文本垂直拉伸。我检查div的高度并缩小字体大小，直到div达到min-height CSS值。

解决了文本高度和包装问题。接下来，我们需要处理冗长的单词...为此，我检查每个span中的每个div，并缩小spans中div内的所有span的文本。 {1}}比div宽。 -.-

以这种方式使用while循环，我认为有必要包含循环限制器，如果出现问题，会将div背景更改为红色。

小提琴：https://jsfiddle.net/96tccod8/

＆＃13;

＆＃13;

$(function() {
    $('.fit-text').each(function() {
        // Fit height
        var fitHeight = parseInt($(this).css('min-height'));
        if ($(this).height() > fitHeight) {
            var c = 0;
            while ($(this).height() > fitHeight) {
                $(this).find('span').each(function() {
                    var fontSize = parseInt($(this).css('font-size'));
                    fontSize = fontSize - 1 + "px";
                    $(this).css('font-size', fontSize);
                });
                c++;
                if (c > 999) {
                    $(this).css('background', 'red');
                    break;
                }
            }
        }
        // Fit width
        var fitWidth = parseInt($(this).css('width'));
        var $div = $(this);
        $(this).find('span').each(function() {
            var c = 0;
            var spanWidth = parseInt($(this).width());
            while (fitWidth < spanWidth) {
                $div.find('span').each(function() {
                    var fontSize = parseInt($(this).css('font-size'));
                    fontSize = fontSize - 1 + "px";
                    $(this).css('font-size', fontSize);
                });
                spanWidth = parseInt($(this).width());
                c++;
                if (c > 999) {
                    $div.css('background', 'red');
                    break;
                }
            }
        });
    });
});

＆＃13;

.fit-text {
    display: block;
    float: left;
    /* width and min-height values are important */
    width: 240px;
    min-height: 50px;
    background: darkgreen;
    margin: 10px;
}

.fit-text span {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 40px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="fit-text">
    <span>TEST</span>
</div>

<div class="fit-text">
    <span>SUPERMEGAMANXZERO</span>
</div>

<div class="fit-text">
    <span>TEST TEST </span>
    <span>SECONDSPANLONGWORD</span>
</div>

<div class="fit-text">
    <span>TEST TEST TEST</span>
</div>

<div class="fit-text">
    <span>TEST TEST TEST TEST TEST</span>
</div>

<div class="fit-text">
    <span>TEST TEST TEST TEST TEST TEST TEST TEST</span>
</div>

＆＃13;

＆＃13;

＆＃13;