突出显示的范围

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代替。通过将height更改为min-height：

，您必须调整CSS的跨度大小，以便在文本跨越多行时增长

   min-height: 20px;

请参阅此小提琴了解工作版本：https://jsfiddle.net/3L4bazg6/7/

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

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

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

Answer 2

参考你的小提琴

• 将display: inline-flex;更改为display: inline;
• 删除height: 20px;
• 添加line-height

这是您更新的JSfiddle

https://jsfiddle.net/sewpjeta/9/