Javascript “制造”的问题；填空；段落 一些背景

我在一个div中放置了五个内联块输入，如下所示：

---

//JS
功能输入（ei、cl）{
var t=document.createElement（“span”）；
t、 className=（cl | | ei.className）+“TMPIW获取”；
t、 style.display=“inline”；
t、 innerHTML=ei.value.replace（//&g，“&；”）.replace（//g，”）；
文件.正文.附件（t）；
var w=t.getBoundingClientRect（）.width；
文件.body.removeChild（t）；
ei.style.width=w+“px”；
}

输入将随着我的输入而增加，但我无法按enter键生成新行（预期）

问题 如果我用文本填充其中一个元素，它会溢出，我希望它会像这样发生： 预期将遵循以下规则：

• 当元素太宽时，它们会分成两行或多行
• 两个图元应始终相邻（其端点相交），除非其中一个端点位于div的边缘。（下一个图元没有空间接触第一个图元，因此将移动到下一行。）

但在“现实”中，这种情况会发生：

这有一些问题：

• 第五个输入在预期中分离为一个新行，但在结果中它超出了div。（第一张和第二张照片）
• 如果输入太宽，但仍有空间溢出，则会向下移动div，在其上方留下一个很大的空白。（第一张照片）

我试着把它变成一个跨度：

<span contenteditable class="w3-input w3-border-bottom dark dark-border-light" style="outline: none;"></span>
<span contenteditable class="w3-input w3-border-bottom dark dark-border-lighter" style="outline: none;"></span>
<span contenteditable class="w3-input w3-border-bottom dark dark-border-light" style="outline: none;"></span>
<span contenteditable class="w3-input w3-border-bottom dark dark-border-lighter" style="outline: none;"></span>
<span contenteditable class="w3-input w3-border-bottom dark dark-border-light" style="outline: none;"></span>

结果是：

这解决了以下问题：

• 文本在div之外

但这增加了问题：

• 输入不必要的宽
• 我可以按enter键注册新行

我仍然没有得到我所期望的。我试着在空白的段落中做一个填充（就像在期望中一样），其中一些部分被填充，但其他部分被保留为空白，供您填充

---

我不想创建新的元素并计算它们的宽度（这是我制作期望照片时做的，非常累人的过程），从而产生一种我的期望被遵循的错觉。用户可能会调整屏幕大小，但意识到问题又回来了，我可能会随时更改样式表。我将非常感谢您对这个问题的任何帮助或解答。（如果可能，请不要使用jQuery；应用程序处于脱机状态，jQuery会占用空间。）

EDIT:As，您可以制作

元素，如下所示

div{
最大宽度：600px；
填充：12px；
边框：1px纯黑；
}
跨度{
线高：1.75；
}
span:n个孩子（偶数）{
底部边框：2件纯黑；
}
跨度：第n个孩子（奇数）{
底部边框：2倍纯红；
}

氮
这是一种美味的款待
植物
各个年龄段的人。事实上，人们可能认为这是对他们所有人的最体面的对待。当然比我好吃
磷
至少

编辑：作为，您可以制作

元素，如下所示

div{
最大宽度：600px；
填充：12px；
边框：1px纯黑；
}
跨度{
线高：1.75；
}
span:n个孩子（偶数）{
底部边框：2件纯黑；
}
跨度：第n个孩子（奇数）{
底部边框：2倍纯红；
}

氮
这是一种美味的款待
植物
各个年龄段的人。事实上，人们可能认为这是对他们所有人的最体面的对待。当然比我好吃
磷
至少

可以使标签的内容可编辑：那么。。。这使事情简化了很多！很高兴知道这一点，而且看起来确实是正确的解决方案。这让我意识到了我的问题：有w3输入，这使得跨度变成了一个div。谢谢<代码>标签可以设置为可编辑的内容：那么。。。这使事情简化了很多！很高兴知道这一点，而且看起来确实是正确的解决方案。这让我意识到了我的问题：有w3输入，这使得跨度变成了一个div。谢谢！

// JS
function adjustWidthInput(ei, cl) {
    var t=document.createElement("span");
    t.className=(cl||ei.className)+" tmp-iw-obtain";
    t.style.display="inline";
    t.innerHTML=ei.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    document.body.appendChild(t);
    var w=t.getBoundingClientRect().width;
    document.body.removeChild(t);
    ei.style.width=w+"px";
}

<span contenteditable class="w3-input w3-border-bottom dark dark-border-light" style="outline: none;"></span>
<span contenteditable class="w3-input w3-border-bottom dark dark-border-lighter" style="outline: none;"></span>
<span contenteditable class="w3-input w3-border-bottom dark dark-border-light" style="outline: none;"></span>
<span contenteditable class="w3-input w3-border-bottom dark dark-border-lighter" style="outline: none;"></span>
<span contenteditable class="w3-input w3-border-bottom dark dark-border-light" style="outline: none;"></span>