换行问题以突出显示跨度

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/

我还删除了span规则中的某些样式，以获得所需的环绕效果。

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

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

Answer 2

指代您的js小提琴

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

这是您更新的JSfiddle

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