CodeMirror 自動換行

Question

我正在努力做到這一點，當您瀏覽一定數量的文本並且它達到代碼鏡像的最大寬度時，它會將您帶到新的一行，而不是僅僅制作一個滾動條並讓您走得更遠。

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

記者：

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

Answer 1

在CSS3中，他們添加了自動換行屬性。 使用自動換行：斷詞；

請注意，它將在有空格的地方創建新行。 如果您的字符串不包含空格，則它將無法按預期運行，因此您需要以編程方式進行操作

Answer 2

設置

lineWrapping：true

在CodeMirror選項中

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

在您用於覆蓋編輯器CSS的CSS中將完成此工作。 如果單詞的長度大於編輯器的寬度，它將在適合的最后一個字符處中斷。 像這樣：

您可以在此處查看示例，記住我為其他目的（以及在Angular中）構建了該示例，但是它也演示了您的用例。

Answer 3

就我而言，它可以更改選項 EditorView。 換行

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