javascript - jqueryの段落要素に合わせてフォントサイズを調整する方法

Question

このような段落要素があります

3桁の文字がある場合は問題なく動作しますが、div要素からなぜかオーバーフローします。段落要素に応じてフォントサイズを自動調整する方法を提案できますか?

このdivのコードはこれです

<div class="details">
            <a><span
                    style="display: block;line-height: 22px;padding-top: 20px;"><b>8375</b></span>
                <span style="display: block;font-size: 17px;padding-top: 5px;">posts</span></a>
        </div>

Answer 1

jQuery

$(".text").css("font-size", $("#details").height()/4);

CSS

<style>
    #details {
        width: 100px;
        height: 100px;
        background:red;
        border:1px solid green;
        }
</style>

HTML

<div id="details">
<a>
    <span class="text"><b>8375</b></span>
    <span class="text">posts</span>
</a>

ブロックの高さに応じてフォントサイズが変更される場合:)

Answer 2

<div class="details" style="width:auto;">