Question

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

当字段达到最大尺寸300px时，我想开始缩小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>

Answer 1

不确定为什么要缩小文本，相反，可以通过删除这些CSS属性white-space: nowrap; text-align:center; overflow:hidden;来溢出文本。

请查看下面的工作片段，以了解我的意思，希望能有所帮助：）

<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>

调整文字大小以适合可扩展的内容可编辑吗？

1 个答案: