当宽度溢出 Div 时减小字体大小答案

【问题标题】：Decreasing Font Size When Width Overflows Div当宽度溢出 Div 时减小字体大小
【发布时间】：2015-11-25 04:49:07
【问题描述】：

我相信我的问题是独一无二的，因为我使用的是一个宽度可以不断增加的计数器，而不是容器宽度的变化，这似乎是通常被问到的问题。

我的网站是http://script-timer.com/，我正在尝试在计时器溢出其容器 div 时减小它的字体。这是我目前正在努力实现此目的的 javascript：

$(document).ready(function() {
    while( $('#scriptTime').width() > $('#timer-container').width() ) {
        $('#scriptTime').css('font-size', (parseInt($('#scriptTime').css('font-size')) - 1) + "rem" );
    } 
});

这对我来说似乎是正确的，但由于我仍在学习，我很可能错过了一些简单的东西。有没有更好的方法来实现这一点？感谢您的帮助！

【问题讨论】：

您可以使用 v 单位创建响应式字体大小。尝试做font-size:2vh; 或类似的东西。调整窗口大小并注意大小的变化。
Font scaling based on width of container的可能重复
我尝试过使用 Viewport Percentage Units，但如果字体本身正在调整大小 - 例如当计时器间隔增加到一分钟以上时，它似乎不会缩放。那时，字体刚好溢出容器。
考虑使用css！！看看这篇文章 - css-tricks.com/viewport-sized-typography
我会再次查看有关视口大小排版的文章，谢谢！

标签： javascript jquery html css

【解决方案1】：

这是插件的链接：https://plugins.jquery.com/textfill/ 以及来源链接：http://jquery-textfill.github.io/

或

在css方法中添加这个

溢出：自动；

【讨论】：

摆弄了一下，但这正是我所需要的——谢谢你好心的先生！