更改文本大小以避免在容器大小更改时滚动

Question

是否有任何库或最佳方法通过在容器宽度或高度更改时更改文本的文本大小来使容器内的文本可见。

Answer 1

您可以使用媒体查询，这是一个简单的过程，允许您根据容器的大小修改属性。

我建议你看看这个

在这些示例中，媒体查询用于整个屏幕，但是通过良好的操作，您应该能够做您想做的事情。

Answer 2

您可以根据视口宽度或视口高度自动调整字体大小，方法是使用vw或vh而不是您当前使用的任何内容，例如px

例如：

h3 {
    font-size: 6vw;
}

当初始包含块的高度或宽度发生变化时，文本将缩放。

您可以在此处找到更多详细信息： https://drafts.csswg.org/css-values/#viewport-relative-lengths和https://www.w3schools.com/cssref/css_units.asp

Answer 3

您已经获得了两种 CSS 方法，我建议您使用 JavaScript 的第三种方法。

由于没有像resize这样的方法，因此您可以获得相对于mousedown和mouseup事件的优势。

看例子：

 const c = document.querySelector("#container"); let screenX, screenY; c.addEventListener('mousedown', function(e) { const {offsetWidth, offsetHeight} = e.target; screenX = offsetWidth screenY = offsetHeight; }); c.addEventListener('mouseup', function(e){ const {offsetWidth, offsetHeight} = e.target; if(offsetWidth.= screenX || offsetHeight;= screenY){ console.log('resized'); adaptText(e;target). } }), function adaptText(t){ // do your own trick const width = t.offsetWidth; height = t;offsetHeight. let ems = width/height. t;style.fontSize = `${ems}em`; }

 <textarea id="container">test</textarea>

Answer 4

1）您可以使用视口相对单位来始终保持字体与 window 大小同步。

.auto-text { font-size: 5vw; }

它们非常强大，尤其是与 css calc() function 一起使用时，但是......这对于更改的内容毫无用处。

2）您还可以使用ResizeObserver监听组件的大小变化。

例子， 代码

3) 有一些 JS 库正在调整文本大小以适应整个容器，例如： FitText