3

重複の可能性：
固定サイズのコンテナを埋めるための動的テキストの自動サイズ設定

ユーザー名を表示するボックスがあります。ただし、10文字しか収まらないことがわかりました。標準のh1フォントサイズを使用しています。

font-size文字数に応じて変更する方法はありますか？私のユーザー名の範囲は3〜10文字です。

4

1 に答える 1

4

以下のコードを試してください。

<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>

これがお役に立てば幸いです。

于 2012-12-17T00:53:46.640 に答える