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的：

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

JS：

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

Answer 1

在CSS3中，他们添加了自动换行属性。使用自动换行：break-word;

请注意，它会创建一个有空格的新行。如果您的字符串不包含空格，则它将无法按预期工作，您需要以编程方式执行

Answer 2

设置

  

lineWrapping：是

在CodeMirror选项和

.CodeMirror-wrap pre { word-break: break-word; }

在您用于覆盖编辑器CSS的CSS中，

会完成此任务。 如果单词的长度大于编辑器的宽度，它将在适合的最后一个字符处中断。像这样：

您可以查看示例here，只需记住我出于其他目的（以及在Angular中）构建了该示例，但是它也演示了您的用例。