我可以根据字母数更改字体大小吗?

2022-01-19 00:00:00 frontend javascript html css

可能重复:
自动调整大小的动态文本以填充固定大小的容器

我有一个显示用户名的框.但是我发现它只能容纳 10 个字母 - 我使用标准的 h1 字体大小.

I have a box which displays the username. However I found that it can only fit 10 letters - I use the standard h1 font size.

有没有办法根据字母的数量来改变font-size?我的用户名长度为 3 到 10 个字符.

Is there a way to change the font-size according to the number of letters? My usernames range from 3 to 10 characters.

推荐答案

请尝试下面的代码.

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript">

    $(function() {
        var len_fit = 10; // According to your question, 10 letters can fit in.
        var un = $('#user_name');

        // Get the lenght of user name.
        var len_user_name = un.html().length;
        if(len_fit < len_user_name ){

            // Calculate the new font size.
            var size_now = parseInt(un.css("font-size"));
            var size_new = size_now * len_fit/len_user_name;

            // Set the new font size to the user name.
            un.css("font-size",size_new); 
        }
    });
</script>
</head>
<body>
    <h1 id="user_name">Your Long Name</h1>
</body>

</html>

希望对你有帮助.

相关文章