Question

我有一个问题，我需要自动调整文本大小，具体取决于父文件中有多少元素。我尝试了一些像BigText和FitText这样的库，但它们似乎没有用。

<div class="prize-cont">
    <div class="prize">
        <h2>$1000</h2>
        <span>Youth Grand Prize</span>
    </div>
    <div class="prize">
        <h2>$1000</h2>
        <span>Adult Grand Prize</span>
    </div>
    <div class="prize">
        <h2>$200</h2>
        <span>Finalists</span>
    </div>
    <div class="prize">
        <h2>T-Shirt</h2>
        <span>Viewer's Choice</span>
    </div>
</div>

基本上它是一个固定的容器高度，我需要获得主容器高度，然后计算在这种情况下有多少个孩子.prize，然后获得h2和{的当前字体大小{1}}然后计算出我需要在每个元素上放下多少个像素以防止溢出。

span

例如，如果我的h2是20px而我的跨度是12px并且我有4个奖品并且它们都适合容器但是我添加了另一个奖品我需要减去所有元素的差异以便使所有跨度10px和所有h2 15px，使它们适合容器。

我已经在这个工作了几个小时，似乎无法弄明白。如果他们知道可以执行此操作的插件/库或简单的脚本

，那么任何帮助都会受到赞赏

Answer 1

这样的事情怎么样：

$(function() {
    var containerHeight = $('.prize-cont').height();
    var prizeContainers = $('.prize');
    var prizeNum = prizeContainers.length;

    // The max height of a single prize container
    var heightPerPrize = containerHeight / prizeNum;

    var current;
    var header;
    var span;
    // For each prize container...
    $.each(prizeContainers, function() {
        current = $(this);
        current.height(heightPerPrize);

        // Set header height to a fractional height, here it is 1/3
        header = current.find('h2').height(heightPerPrize / 3);

        // Set span height to a fractional height, here it is 2/3
        span = current.find('span').height((heightPerPrize / 3) * 2)
    });
});

Answer 2

你可以这样做：

<div class="prize-cont">
    <div class="prize">
        <div>
        <h2>$1000</h2>
        <span>Youth Grand Prize</span>
        </div>
    </div>
    <div class="prize">
        <div>
        <h2>$1000</h2>
        <span>Adult Grand Prize</span>
        </div>
    </div>
    <div class="prize">
        <div>
        <h2>$200</h2>
        <span>Finalists</span>
        </div>
    </div>
    <div class="prize">
        <div>
        <h2>T-Shirt</h2>
        <span>Viewer's Choice</span>
        </div>
    </div>
</div>

然后使用overflow / height的概念来调整文本大小：

$('.prize-cont div').each(function () {
    var container = $(this),
        content = container.find('div'),
        i = 0;
    while (content.height() > container.height() && i < 10) {
        var fontSize = container.css('fontSize'),
            numSize = parseInt(fontSize, 10),
            units = fontSize.split(numSize)[1],
            newSize = numSize - 1;
        container.css('fontSize', newSize + units);
        i++;
    }
});

这里有一个工作小提琴让你“摆弄”：http://jsfiddle.net/harveyramer/TZ4NQ/22/

我确信这种方法存在一些问题，但它可能只能解决您的问题。有一点需要注意，少量的JavaScript依赖于使用div的内容的相对字体大小。我还在容器div中添加了一个允许弯曲的div。当该高度大于容器时，内容字体大小会减小。

jquery根据元素div大小调整文本大小

2 个答案: