时间戳

首页 > 解决方案 > 调整文本大小以适应可扩展内容可编辑？

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

问题描述

我有一个扩展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>

标签： javascripthtmlcssdomsass

解决方案

不知道为什么需要缩小文本，而是可以通过删除这些 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>

推荐阅读