Javascript 当长单词水平溢出时，减小字体大小

我有很长的标题，有时会在小屏幕上稍微溢出窗口，因此我制作了一个脚本，只有当标题溢出其容器时，才减小标题的字体大小，直到它适合其容器。。它可以工作，但我确信可以找到更轻的解决方案

function adaptFontSize(titles) {
    $(titles).each(function() {
        var title = $(this),
            reducedFontSize,
            counter = 0;
        if (title[0].scrollWidth <= title.innerWidth()) { // if title <= container
            title.css('font-size', ''); // remove previously added font-size
        }
        while (title[0].scrollWidth > title.innerWidth() && counter < 20) { // while title > container
            var fontSize = reducedFontSize || parseInt(title.css('font-size')); // current title font-size
            reducedFontSize = Math.floor((fontSize - fontSize / 20) * 100) / 100; // reduce the font-size
            title.css('font-size', reducedFontSize + 'px'); // apply the reduced font-size
            counter++ // counter to limit the loop in case title[0].scrollWidth is not supported
        }
    });
}

函数大小（标题）{
$（标题）。每个（函数（）{
var title=$（此），
缩小字体大小，
计数器=0；
如果（标题[0]。滚动宽度容器
var fontSize=reducedFontSize | | parseInt（title.css（'font-size'））；//当前标题字体大小
reducedFontSize=Math.floor（（fontSize-fontSize/20）*100）/100；//减小字体大小
title.css（'font-size'，reducedFontSize+'px'）；//应用缩减的字体大小
计数器+++//用于限制大小写标题[0]中循环的计数器。不支持scrollWidth
}
});
}

或者这里有一个JSFIDLE：

当我尝试在

$（window）.resize（）

上应用脚本时，我的问题就出现了。它实际上可以工作，但我感觉这个过程很繁重。它必须以两种方式工作：

• 如果标题太宽，请减小字体大小
• 当窗口变宽时，增大字体大小，直到标题达到其原始字体大小

以下是我尝试但未能实现的一些步骤：

• 它不会在调整窗口大小的每个像素处一直启动函数，而是等待窗口停止调整大小
• 当窗口变得更宽时，在比窗口小的标题中，只有那些已经调整大小并且可能需要再次变大的标题才是目标

因此，我正在寻找一种方法来解决这些问题，或者寻找一种更有效的方法来解决这些问题。

您可以使用

1vw

等于视图宽度的

1%

，因此它是一个简单的css专用解决方案，适用于所有现代浏览器

正文{
边缘：1米；
字体系列：无衬线；
}
div{
背景颜色：黄色；
字体大小：5vw；
边缘底部：1rem；
}

abcdefghijklmnopqrstuvxyz 012356789

您可以使用

1vw

等于视图宽度的

1%

，因此它是一个简单的css专用解决方案，适用于所有现代浏览器

正文{
边缘：1米；
字体系列：无衬线；
}
div{
背景颜色：黄色；
字体大小：5vw；
边缘底部：1rem；
}

---

ABCDEFGHIJKLMNOPQRSTUVWXYZ 012356789

您可以尝试媒体查询仅css解决方案。但我99%的标题大小合适，只有1%的溢出。我正在寻找仅适用于最后这些标题的解决方案，并且可以在许多小屏幕宽度上保持一致。您可以尝试媒体查询仅css解决方案。但我99%的标题有好的大小，只有1%的溢出。我正在寻找一个解决方案，只针对最后这些，并且可以在许多小屏幕宽度上保持一致。谢谢你的建议，但事实并非如此：当标题小于窗口时，我需要一个固定的字体大小，只有当标题大于窗口时，才减少字体大小。你会d为此需要javascript…您可以使用媒体查询来设置最小宽度以应用此规则。这太容易了！最简单的方法是对浏览器影响最小的方法。感谢您的建议，但事实并非如此：当标题小于窗口时，我需要固定字体大小，并且只减少字体大小在标题比窗口宽的情况下调整大小。你需要javascript来实现这一点…你可以使用媒体查询来设置最小宽度来应用此规则。这太容易了，不好玩！最简单的方法是对浏览器伤害最小的方法。