javascript - 突出显示跨度的换行问题

Question

我有这个突出显示的范围，您可以在其中键入文本

jsfiddle

您可以单击白色区域并开始输入。现在，当您键入并到达时，我希望它换行。

HTML 不是很特别:

<div>
  Complete the story:<br>
  Once upon a time there was <span></span>. And they all die :)
</div>

<input>

为了使输入成为可能，我使用了一个隐藏的(在演示中没有隐藏)输入字段。无论如何，现在当您开始输入并到达该行的末尾时，它应该按如下方式换行:

我已经尝试过像 word-wrap:break-word; 这样的东西，但效果不是很好。这样的事情甚至可能吗？

Answer 1

您不能在 input 中换行文本。您可以改用 textarea。您必须调整 CSS 以随着文本跨越多行而增大跨度大小，方法是将 height 更改为 min-height:

   min-height: 20px;

请参阅工作版本的 fiddle :https://jsfiddle.net/3L4bazg6/7/

我还删除了您的跨度规则中的一些样式，以获得您正在寻找的环绕效果。

这是另一个完全隐藏文本区域的 fiddle :https://jsfiddle.net/3L4bazg6/10/

而且，这里有一个 fiddle ，完全取消了 textarea 和 JavaScript，只使用 contenteditable:"https://jsfiddle.net/3L4bazg6/17/