Question

我有一个填充屏幕的网格，每个单元格都包含一些文本作为标签。我应该在CSS中写什么来调整此文本的大小以填充容器而不会溢出？请记住，它可能受到高度或宽度的限制。

现在只是

label {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 150pt; /*must be adaptive*/
}

Jsfiddles：grid 3x3，grid 1x10

或者如果没有想法......
目前我有两个公式作为替代变体，可以计算相对于高度（第一）和宽度（第二）的所需字体大小。如果支持，我会使用min()。因此，如果CSS上没有优雅的解决方案，那么另一个问题是：是否可以有效地定义CSS变量并将其设置为window.onresize中具有js的公式的最小值？

Answer 1

试试这个。它会将字体缩放到每个容器

            label {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 150pt;
            font-size: 9vw;
            }

Answer 2

我很确定没有“纯粹的CSS”方法来实现这一目标。

我编写了一个js脚本，用于检查容器是否存在溢出/滚动高度。你可以从小的东西开始，比如1px的字体大小，并且不断增加它直到容器溢出，然后将它缩小到1级。

或者，有一个非常大的字体大小，比如200px（或者你的MAX是什么）。然后反过来直到容器上不再有溢出/滚动。

你可以通过每次跳“半路”来优化它，而不是一次跳1px。所以......

200px ? scrollHeight > height || scrollWidth > width : true
100px ? scrollHeight > height || scrollWidth > width : false
150px ? scrollHeight > height || scrollWidth > width : true
125px ? scrollHeight > height || scrollWidth > width : true
... etc etc.

其他几点：

检查scrollHeight和scrollWidth（一个不会换行的长词）
在计算时隐藏容器以防止闪烁
测试，测试测试，很多潜在的问题，但我发现它工作得很好
有probably a library，只要你懒惰就使用它;）

CSS - 使字体尽可能大以填充容器

2 个答案: