可编辑的div或span，当达到最大长度时自动调整大小？

Question

在浏览器中是否可以拥有一个带有最大长度（maxlength）属性的contenteditable div，并且它会自动调整大小，直到达到最大长度为止？

基本上我想要一个可编辑元素，实际上只占用所需的显示空间，同时具有最大长度（max length）属性。

EDITABLE_____________NORMAL WORD

我希望确保可以编辑的缩放并且只占用所需空间。原因是我想将其生成为PDF文件。因此，多余的空间将被裁剪掉。因此，在浏览器中我们也应该看到同样的效果。这个问题太复杂了吗？

EDITABLE NORMAL WORD

我找到了一个相关的问题。

如何在ContentEditable div中限制字符数量

- Nishant

---

你的 div 必须设置 css 的 height 或 max-height，并带有 overflow:scroll 或类似的设置，因为如果没有这些设置，div 将会根据内容自动增加高度。 - Rob Sedgwick

如果您正在引用“宽度”，请将CSS“inline-block”添加到div中，以自动增加宽度，直到达到其“max-width” CSS。 - Rob Sedgwick

Answer 1

http://jsfiddle.net/KmFL6/ 看起来可以正常工作。

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

跨度是其中的关键概念，它可以横跨所需的区域！

http://codepen.io/flesler/pen/AEIFc也很酷。 CSS属性也会给你一个占位符。

[contenteditable=true]:empty:before {
  content: attr(placeholder);
}

- Nishant

Answer 2

您可以将CSS设置为具有max-width和min-width，如下所示：

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

然后像其他人所说的那样在HTML中处理。

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

- Mobius

---

样式选择器名称缺少点号。 - Gonçalo Vieira

Answer 3

为了使 contentEditable 很好地适应，您只需要将其设置为非块级元素或在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);
}

这里是演示

更新：将此扩展以包括min长度也相当简单。 这是一个更新的 jsFiddle，它就是这样做的。

- Moob

Answer 4

1. 创建可编辑内容通用的css大小（flex等）
2. 设置可编辑内容的css：word-break: break-all 或 break-word

- alex_1948511