显示内联文本框并带有自动换行的长文本

Question

我正在寻找一种解决方案，可以将很长的文本环绕在input type="text"周围。

我在跨度和输入上尝试了不同的自动换行样式和显示样式，但是没有找到正确的组合

我发现有几篇文章针对文本的多个部分执行此操作，但是，一旦我引入了文本框，包装就不再能像我那样工作了 喜欢。

这个问题（Display Inline elements with word wrapping）和第一个答案本质上是我在寻找的东西，期望div id =“ text2”必须是一个文本框

此刻我正坐在那里

.outside-div{
  width: 250px;
  border: 1px solid blue;
  word-wrap: break-word;
  font-family: Courier New;
}

<div class="outside-div">
  <span class="pre-input">AVeryLongWordThatWouldCauseTheTextToWrapAroundToTheNextLine</span>
  <input type="text" value="SomeText" size="8" />
  <span class="post-input">AnotherVertyLongWordThatWouldCauseTheTextToWrapAroundToTheNextLine</span>
</div>

我想获得下面的图像（用油漆制作，所以不完美）