如何让<textarea>符合多栏布局？

Question

这将在列中显示一些文本：

<div class="content-box" style="column-width: 8em">
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
</div>

但是，textarea 似乎不像文本的其余部分那样按列换行：

<div class="content-box" style="column-width: 8em">
  <p>blah blah...</p>
  <textarea rows="100"></textarea>
  <p>blah blah...</p>
  <p>blah blah...</p>
</div>

我想显示一个与文本一致的文本区域，如果它太长，将会溢出到下一列。除了它是一个可编辑区域外，它基本上应该看起来像文本。有没有办法让这个工作？

我正在尝试构建一个 mad-libs 应用程序。除了文本的某些部分应该是可编辑的（填充空白区域）之外，还有一个多列的文本布局（看起来像报纸）。可编辑区域可能很长，如果碰巧运行进入下一列的末尾，应该优雅地溢出到下一列，就像普通文本一样。

Answer 1

我认为您无法使用 textarea 元素实现此目的。这取决于浏览器的默认设置，并且不像其他元素那样灵活。

您可以做的是通过 CSS 模拟一种文本区域并自己处理事件（使用键盘和鼠标事件）。虽然这可能需要很多工作。

Answer 2

textarea 不会这样做，但是 contenteditable 元素会

div[contenteditable] {
  outline: none;
}

<div class="content-box" style="column-width: 8em">
  <p>blah blah...</p>
  <div contenteditable>
  blah edit<br>
  blah edit<br>
  blah edit<br>
  blah edit<br>
  blah edit<br>
  blah edit<br>
  blah edit<br>
  blah edit<br>
  blah edit<br>
  blah edit<br>
  blah edit<br>
  </div>
  <p>blah blah...</p>
  <p>blah blah...</p>
</div>

如何让<textarea>符合多栏布局？

How to conform <textarea> to multi-column layout?

html

css

forms

frontend