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

【问题标题】：Change Text size to avoid scroll when container size changes更改文本大小以避免在容器大小更改时滚动
【发布时间】：2020-03-15 02:26:16
【问题描述】：

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

【问题讨论】：

默认情况下不就是这样吗？什么样的容器？

标签： javascript css text sass contenteditable

【解决方案1】：

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

I advice you to look at this

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

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

1) 您可以使用viewport relative units 来始终使您的字体与窗口大小保持同步。

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

它们真的很强大，尤其是在与 css calc() 函数一起使用时，但是......这对于改变的内容是没有用的。

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

Example, code

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

【讨论】：

感谢 rezise 观察者的建议。看到了交叉路口观察者，但从未见过 rezise 一个

【解决方案4】：

你已经有了两个 CSS 方法，我建议你使用 JavaScript 的第三个。

您可以比mousedown 和mouseup 事件获得优势，因为没有像resize 这样的任何方法。

看例子：

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

&lt;textarea id="container"&gt;test&lt;/textarea&gt;

【讨论】：