Javascript Contenteditable div或span，可调整大小直到达到最大长度？

是否可能在浏览器中有一个具有maxlength的contenteditable div，它会自动调整大小，直到达到最大长度

基本上，我希望有一个可编辑的元素，它实际上只消耗显示所需的空间，但具有最大长度属性

EDITABLE_____________NORMAL WORD

我想确保editalbe调整大小，只消耗所需的数量。 原因是我想从中生成PDF。因此，额外的空间将以任何方式被修剪。所以在浏览器中，我们也应该看到相同的情况。这太复杂了，无法解决

EDITABLE NORMAL WORD

我发现了一个相关的问题

似乎有效

<strong>
    <p>Hello
<span class="editable" contenteditable=true placeholder="Element">   </span>World
    </p>
</strong>

---

您可以将css设置为具有

最大宽度

和

最小宽度

，如下所示：

<style>
    .some-selector{
       max-width: 20em; /* or whatever you want */
       min-width: 0px;  /* this is only if it is empty */
       width:auto; 
       word-wrap: break-word /* useful if you have really long words that would overflow otherwise*/
    }
</style>

.一些选择器{
最大宽度：20em；/*或任何您想要的*/
最小宽度：0px；/*仅当它为空时才可用*/
宽度：自动；
单词换行：如果您有很长的单词，则断开word/*非常有用，否则会溢出*/
}

然后像其他人所说的那样使用html

<span contenteditable='true' class="some-selector"></span>

---

要使

内容可编辑，只需将其设置为非块级元素或将其设置为CSS中的元素即可：

.textfield {display:inline;}

要限制可以输入的字符数，需要JavaScript

首先更新contenteditable元素以包含
max
属性：

<div contenteditable="true" name="choice1" class="textfield" max="15">EDITABLE</div>

可编辑

然后使用JS监听这些元素上的按键，直到达到最大长度为止：

var textfields = document.getElementsByClassName("textfield"); 
for(i=0; i<textfields.length; i++){
    textfields[i].addEventListener("keypress", function(e) {
        if(this.innerHTML.length >= this.getAttribute("max")){
            e.preventDefault();
            return false;
        }
    }, false);
}

var textfields=document.getElementsByClassName（“textfield”）；
对于（i=0；i=this.getAttribute（“max”））{
e、 预防默认值（）；
返回false；
}
}，假）；
}


更新：将其扩展为包含
min
长度也相当简单

创建内容可编辑通用css大小（flex等）
设置内容可编辑css:
word break:break all
或
break word
您的
div
必须将css
height
或
max height
设置为
溢出：scroll
或类似设置，因为div将从没有这些设置的内容自动增加高度。如果您指的是“width”，请将css“inline block”添加到div中，若要自动增加宽度，直到达到最大宽度，请单击“s”。在样式选择器名称上
var textfields = document.getElementsByClassName("textfield"); 
for(i=0; i<textfields.length; i++){
    textfields[i].addEventListener("keypress", function(e) {
        if(this.innerHTML.length >= this.getAttribute("max")){
            e.preventDefault();
            return false;
        }
    }, false);
}