Question

你好，我有一个以网格方式显示数据的应用程序，这是＆＃34;块之一＆＃34;离开下面的网格。在Divs中填写JSON文件中的数据并填充div。

所有项目的数据限制为4个字符（0到9999之间的数字）。然而，当有1个字符时，它看起来太小，因为我必须保持字体大小相当小，所以当有超过1000字符时它不会溢出。

我的问题是什么是独立自动调整每个div的字体大小的最佳方法，以便它始终适合最大尺寸

 <div class="box">
        <div class="Top">ZW01025</div>
        <div id="ZW01025" class="Midbox">
        </div>
        <div id="ZW01025b" class="Midbox">
        </div>
        <div id ="ZW01025C" class="BottomboxPercent">
        </div>
        <div id ="ZW01025D" class="BottomboxPercent">
        </div>
        <div id ="ZW01025p" class="Bottombox">
        </div>

    </div>

他是一个完整的小提琴，它并不适合Js小提琴http://jsfiddle.net/RYU54/3/

Answer 1

如果你可以使用JavaScript解决方案，我会查看flowtype.js

http://simplefocus.com/flowtype/

Answer 2

在.Top css类中添加字体大小，喜欢这个：

.Top{
    height: 20%;
    width: 90%;
    margin: 1px auto;
    background-color: #596163;
    text-align: center;
    color: white;
    font-size: 30px;   /* added */
    font-size: 3.5vw;  /* added */
    ...
}

Answer 3

我制作了一个脚本来自动缩放文本以适合周围的div，它可以在您的情况下工作：

https://github.com/jeremiahrose/perfectFit.js

自动缩放文本以适合div

3 个答案: