Javascriptで親要素の幅に合わせて子要素の文字数が一定になるようにサイズを調整する

littlebuddha 



<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resizefont</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .child {
            font-size: 1rem;
            text-align: justify;
            font-feature-settings: "palt";
        }
    </style>
</head>

<body>
    <div>
        <div class="child">
            指定された文字数が収まるように文字サイズを調整する関数
        </div>
    </div>

    <div style="width: 50vw">
        <div class="child">
            指定された文字数が収まるように文字サイズを調整する関数
        </div>
    </div>

    <div style="width: 20vw;">
        <div class="child">
            指定された文字数が収まるように文字サイズを調整する関数
        </div>
    </div>


    <script>
        /**
         * 指定された文字数が収まるように文字サイズを調整する関数
         * @param {string} childSelector - 文字サイズを調整する子要素のセレクタ
         * @param {number} charCount - 収めたい文字数
         */
        function adjustFontSizeToFitCharacters(childSelector, charCount) {
            const children = document.querySelectorAll(childSelector);

            children.forEach(child => {
                const parent = child.parentElement;
                if (parent) {
                    const parentWidth = parent.offsetWidth;
                    const fontSize = Math.floor(parentWidth / charCount);
                    child.style.fontSize = `${fontSize}px`;
                    child.style.lineHeight = 1.1;  // 行間を1.1倍に設定
                }
            });
        }

        // ドキュメント内のすべての ".child" 要素に対して、10文字が収まるように文字サイズを調整
        adjustFontSizeToFitCharacters('.child', 10);

        // 読み込み後実行
        window.addEventListener('load', function () {
            adjustFontSizeToFitCharacters('.child', 10);
        });

        // リサイズ後実行
        window.addEventListener('resize', function () {
            adjustFontSizeToFitCharacters('.child', 10);
        });


    </script>
</body>

</html>

いいなと思ったら応援しよう！