缩放文本大小以填充按钮

Question

我的bootstrap网站上有一个按钮。

<input type="submit" value="GET INSTANT ACCESS!"class="btn btn-lg">

我用css使其宽度为100％。

.btn-lg {
        width: 100%;
    }

我想缩放按钮内的文本以填充按钮的宽度（填充其包含div的宽度）。但是，我不希望文本导致按钮宽度大于100％并拉伸它所包含的div。

我想要的是将文本缩放到按钮的宽度： 而不是文本是小的 或文本太大，导致网页宽度大于设备宽度

Answer 1

如果JS（jQuery）是可接受的解决方案，请参阅my fiddle。

您可以在需要调整字体大小的事件上使用fitText(elem)函数。

$('.container').each(function() {
    fitText($(this).find(':submit').get(0));
});

function fitText(elem) {
    var $button = $(elem),
        size = 1; // your preferred initial size
    console.log($button.attr('type'));
    for (;size < 150; size++ ) {
        $button.css('font-size', size + 'px');
        var currentLH = parseInt($button.css('font-size'), 10);
        if (parseInt($button.height(), 10) >= (currentLH * 2)) {
            size--;
            $button.css('font-size', size + 'px');
            break;
        }
    }
}

.container {
    border: 1px solid red;
    margin: 0 0 10px;
}
.c1 { width: 150px; }
.c2 { width: 400px; }
.c3 { width: 100%; }
.btn-lg {
    width: 100%;
    word-wrap: break-word;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container c1">
    <input type="submit" value="GET INSTANT ACCESS!" class="btn btn-lg" />
</div>
<div class="container c2">
    <input type="submit" value="GET INSTANT ACCESS!" class="btn btn-lg" />
</div>
<div class="container c3">
    <input type="submit" value="GET INSTANT ACCESS!" class="btn btn-lg" />
</div>

Answer 2

如果您不希望按钮的宽度大于100％，则必须将其添加到css中： .btn-lg { width: 100%; max-width: 100%; }

这将不允许您的按钮大于100％。