当长字水平溢出时减小字体大小

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/

当我尝试在$(window).resize() 上应用脚本时，我的问题出现了。它实际上工作，但我能感觉到这个过程很繁重。它必须以两种方式工作：

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

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

• 它不会在窗口调整大小的每个像素处一直触发该函数，而是等到它停止调整大小。
• 当窗口变宽时，仅定位（在小于窗口的标题中）已经调整大小并且可能需要再次变大的标题。

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

Answer 1

您可以使用VW unit。

1vw 等于视图宽度的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>