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>

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

1 个答案: