CodeMirror（JS代码高亮）textarea中的文本超出textarea宽度

Question

我今天一直在使用 CodeMirror 创建一个小环境，在其中我可以编辑存储在数据库中的一些 PHP 代码（是的，我知道这可能是有害的，但普通用户无法访问 PHP 代码）。

一切都很好，编辑器可以工作，代码突出显示可以工作，缩进选项卡可以工作，但是有一件事困扰了我一段时间，我似乎找不到解决方案。我的 CodeMirror 编辑器文本区域中的代码比文本区域长，超出了文本区域，并将消失在屏幕之外的某个位置（请参阅本文末尾的屏幕截图）。

我想让这段代码继续在下面一行（当然不添加额外的行号）。这是一个已知问题和/或容易修复吗？

这是一个屏幕截图： http://www.pendemo.nl/codemirror.png

提前致谢。

//编辑：已修复

好吧，搞清楚了，似乎都在 CSS 文件中！这是任何感兴趣的人的修复：

.CodeMirror {
  overflow-y: auto;
  overflow-x: scroll;
  width: 700px;
  height: auto;
  line-height: 1em;
  font-family: monospace;
  _position: relative; /* IE6 hack */
}

overflow-y：auto（高度是自动完成的，因此不需要垂直滚动条）。溢出-x：滚动；强制 CodeMirror 添加滚动条而不是超出文本区域的宽度。它们给出固定的宽度（像素或百分比）。您还可以添加最大高度，但如果这样做，您可能必须设置溢出-y 才能滚动。

Answer 1

通过将 lineWrapping 选项设置为 true，可以轻松在 CodeMirror 中启用自动换行。例子：

    <textarea id="code" name="code">
      ...
    </textarea>

    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        tabMode: "indent",
        matchBrackets: true,
        theme: "night",
        lineNumbers: true,
        lineWrapping: true,
        indentUnit: 4,
        mode: "text/javascript"
      });
    </script>

Answer 2

它已修复，如果其他人可能遇到此问题，请参阅问题以获取详细信息。

Answer 3

正如克里斯上面评论的那样，问题中描述的解决方案不再（总是？）起作用。

然而，向 CSS 添加 max-width: ...ex; 似乎确实会强制水平滚动条。

（如果没有这个，例如仅使用 width: ...，仅使用 lineWrapping: true 配置 CodeMirror （如 fywe 的答案）可以防止它公然拉伸盒子很长时间线，但 lineWrapping 有其自身的缺点（例如导航不友好的 Home/End 处理），因此这可能没有真正的帮助。）