10

我正在努力做到这一点，所以当你浏览一定数量的文本并且它达到代码镜像的最大宽度时，它会将你带到一个新行，而不是仅仅制作一个滚动条并让你走得更远。

查看示例！ 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：

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

2 回答 2

6

设置

换行：真

在 CodeMirror 选项和

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

在您用来覆盖编辑器的 CSS 的 CSS 中将完成这项工作。如果单词长于编辑器的宽度，它将在最后一个适合的字符处中断。像这样的东西：

CodeMirror 编辑器在宽度线上打断单词

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

于 2019-08-06T13:45:49.383 回答
4

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

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

于 2013-11-03T19:22:40.527 回答