调整文本大小以适应可扩展内容可编辑？答案

【问题标题】：Resize text to fit in expandable contentEditable?调整文本大小以适应可扩展内容可编辑？
【发布时间】：2019-01-23 19:51:28
【问题描述】：

我有一个扩展的contentEditable，它从 50 像素增长到最大 300 像素，具体取决于在字段中输入的文本量。

当字段达到 300 像素的最大尺寸时，我想开始缩小 contentEditable 中的文本。 直到文本将 contentEditable 推到我想要的最大尺寸喜欢保持文本的原始大小。

我想只使用 CSS，但也欢迎使用 JavaScript 解决方案。

我可以找到有关如何适应文本或将元素适应包含的文本的信息，但不能实现这样的混合解决方案。

编辑

<div class="wrapper" style="display:flex;">
  <div contenteditable="true" style="font-size: 2rem; margin: 10px; background: #ddd; border: 3px solid #ccc; min-width:50px; width:auto; max-width:300px; white-space: nowrap; text-align:center; overflow:hidden;"></div>
</div>

【问题讨论】：

请提出您到目前为止所尝试的内容。
我认为没有非骇客的方法可以解决这个问题。我看到的唯一方法是测量每次击键时contentEditable 的大小，然后动态更新元素的 CSS。如果contentEditable 本身没有增长，我会尝试很多其他的事情，但既然它增长了，我不确定有什么更好的方法。我相信一定有更好的东西。
您能否提供一个Minimal, Complete, and Verifiable example 并提供相关代码和 CSS，以便我们可以看到您到目前为止所做的工作？
@Girish 感谢您的回复。我已经更新了我的问题，以包含一个 JSFiddle 以及我正在使用的示例。
当用户写了很多文本并且font-size 缩小到 6px 时会发生什么？用户将无法阅读他正在输入的内容

标签： javascript html css dom sass

【解决方案1】：

不知道为什么你需要缩小文本，你可以通过删除这些css属性white-space: nowrap; text-align:center; overflow:hidden;来溢出文本。

请查看下面的工作 sn-p，了解我的意思，希望对您有所帮助:)

<div class="wrapper" style="display:flex;">
  <div contenteditable="true" style="font-size: 2rem; margin: 10px; background: #ddd; border: 3px solid #ccc; min-width:50px; width:auto; max-width:300px;"></div>
</div>

【讨论】：

谢谢@girish，但我需要它缩小。 overflow: hidden 的存在是有充分理由的。