如何使 <textarea> 符合多列布局？答案

【问题标题】：How to conform <textarea> to multi-column layout?如何使 <textarea> 符合多列布局？
【发布时间】：2017-05-20 00:15:49
【问题描述】：

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

<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 应用程序。除了文本的某些部分应该是可编辑的（填充空白区域）之外，文本的多栏布局（看起来像报纸）。可编辑区域可能很长，如果它们碰巧跑到下一列的末尾，它们应该优雅地溢出到下一列，就像普通文本一样。

【问题讨论】：

标签： html forms css frontend

【解决方案1】：

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>

【讨论】：

注意contenteditable 隐含的隐含行为比textarea 允许的要多得多。用户可能会输入（或复制/粘贴）一些 HTML 内容，如果没有预料到，这将导致无法预料的结果。此外，如果您有兴趣检索要处理的值，您仍然需要处理事件或找到将 HTML 内容转换回文本的方法或默认为 textContent 并交叉手指。如果所有默认值都适合您的情况，那么这是可行的方法。
@Simon 感谢您的评论。我非常清楚这一点。任何开始使用contenteditable 的人都不会立即面临危险，当您允许某人将数据发布到您的网络服务器时，您需要知道该做什么，以及何时使用contenteditable 或textarea ，危险同样大......问题是关于如何明智地流动可编辑的文本列。
当然，如果其他人来看这个答案，我的评论是为了提供一般信息

【解决方案2】：

我认为你不能使用textarea 元素来实现这一点。这取决于浏览器的默认设置，不能像其他元素那样灵活。

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

【讨论】：