javascript - 长字横向溢出时减小字体大小

Question

我的标题很长，有时在小屏幕上会稍微溢出窗口，所以我制作了一个脚本来减小标题的字体大小，直到它适合其容器仅当标题溢出其容器时 …它有效，但我相信可以找到更简单的解决方案。

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
        }
    });
}

或者这是一个 JSFiddle:https://jsfiddle.net/Raoulito/pek7b3mr/12/

My problem comes when I try to apply the script on $(window).resize(). It actually works but I can feel that the process is heavy. It has to work in both ways:

• reduce the font-size if the title's too wide,
• increase the font-size when the window gets resized wider, until the title reaches its original font-size.

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

• 它不会在调整窗口大小的每个像素时一直触发该函数，而是等到它停止调整大小。
• 当窗口调整得更宽时，只针对那些比窗口小的标题——那些已经调整过大小并且可能需要再次变大的标题。

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

Answer 1

您可以使用 VW unit .

1vw 等于 View 宽度的 1%，因此这是一个适用于所有现代浏览器的简单的纯 css 解决方案。

https://jsfiddle.net/pek7b3mr/8/

body {
    margin: 1em;
    font-family: sans-serif;
}

div {
    background-color: yellow;
    font-size: 5vw;
	margin-bottom: 1rem;
}

<div>ABCDEFGHIJKLMNOPQRSTUVWXYZ 012356789</div>