CodeMirror auto Line-Break

Question

I'm trying to make it so when you go over a certain amount of text and it reaches the max-width of the codemirror it will bring you down to a new line instead of just making a scrollbar and making you go out further.

Checkout the example! 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>

Solution 1

Setting the

lineWrapping: true

in the CodeMirror options and

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

in the CSS you use to override your editor's CSS will do the job. In the case that the word is longer than the width of the editor it will break at the last character that fits. Something like this:

You can check out the example here, just keep in mind I built it for other purposes (and in Angular) but it also demonstrates your use-case.

Solution 2

In CSS3 they added word-wrap property. Use word-wrap: break-word;

Note that it will create new lines where there is a whitespace. If your string contains no space, it will not work as intended and you'd need to do it programmatically