突出显示的跨度的换行问题答案

【问题标题】：Line-Wrap issue for highlighted span突出显示的跨度的换行问题
【发布时间】：2016-03-09 21:53:59
【问题描述】：

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

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

HTML 不是很特别：

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

<input>

为了使输入成为可能，我使用了一个隐藏（在演示中未隐藏）输入字段。无论如何，现在当您开始输入并到达行尾时，它应该如下换行：

我尝试过word-wrap:break-word; 之类的方法，但效果不佳。这样的事情有可能吗？

【问题讨论】：

【解决方案1】：

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

   min-height: 20px;

查看这个小提琴的工作版本：https://jsfiddle.net/3L4bazg6/7/

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

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

而且，这是一个完全取消 textarea 和 JavaScript 并且只使用 contenteditable 的小提琴：" https://jsfiddle.net/3L4bazg6/17/

【讨论】：

【解决方案2】：

参考你的 js fiddle

这是你更新的 JSfiddle

【讨论】：