CodeMirror自动换行

Question

我试图实现这样的效果：当文本超过CodeMirror最大宽度时，它会自动换行而不是出现滚动条并让你继续向右滚动。

看看这个例子！ http://codeeplus.net/test.php

CSS：

<style>
  .CodeMirror { height: 400px; width: 500px; border: 1px solid #ddd; }
  .CodeMirror-scroll { max-height: 400px; width:500px; }
  .CodeMirror pre { display:inline-block; padding-left: 7px; line-height: 1.25; }
  #drawing { border: 1px solid #555555; float:left; display:inline-block; width:480px; height: 380px; }
</style>

文本区：

<textarea align="left" style="display:inline-block;" id=demotext name="textarea">

JS:

->

JavaScript：

  <script>
    var editor = CodeMirror.fromTextArea(document.getElementById("demotext"), {
      lineNumbers: true,
      lineWrapping: true,
      mode: "text/html",
      matchBrackets: true
    });
  </script>

- user2812028

Answer 1

在CodeMirror选项中设置lineWrapping: true，并在覆盖编辑器CSS的CSS中添加.CodeMirror-wrap pre { word-break: break-word; }即可解决问题。如果单词长度超过了编辑器的宽度，它将会在最后一个适合的字符处断开。如下图所示：

您可以查看此处的示例，但请记住我为其他目的（在Angular中）构建了它，但它也演示了您的用例。

- Marko Letic

Answer 2

CSS3中添加了word-wrap属性。使用word-wrap: break-word;

请注意，它会在空格处创建新的行。如果您的字符串不包含空格，则无法按预期工作，您需要通过编程来实现。

- Alexandre TryHard Leblanc

Answer 3

在我的情况下，更改选项 EditorView.lineWrapping 是有效的。

const options = {
    ...yourOptions,
    lineWrapping: true,
}

- job.js.org