CodeMirror (JS Code Highlight) text in textarea exceeds textarea width

Question

I've been working with CodeMirror today to create a little environment where I can edit some PHP code that is stored in a database (yes, I know this could be harmfull, but the PHP code is not accesable for normal users).

Everythings works great, the editor works, code highlighting works, indent tabs work, but there's one thing that's bothering me for a while now and I can't seem to find a solutions to this. The code that is within my CodeMirror editor textarea, which is longer than the textarea exceeds the textarea and will disappear somewhere out of my screen (see the screenshot at the end of this post).

I would like to have this code to continue on a line below (without adding an extra linenumber ofcourse). Is this a known issue and/or easy to fix?

Here's a screenshot: http://www.pendemo.nl/codemirror.png

Thanks in advance.

//Edit: it's fixed

Ok, got it figured out, seemed to be all in the CSS file! Here's the fix for anyone that's interested:

.CodeMirror {
  overflow-y: auto;
  overflow-x: scroll;
  width: 700px;
  height: auto;
  line-height: 1em;
  font-family: monospace;
  _position: relative; /* IE6 hack */
}

overflow-y: auto (height is being done auto, so no need for a vertical scrollbar). overflow-x: scroll; to force CodeMirror to add a scrollbar instead of exceeding the width of the textarea. And they give a fixed width (px or percentage). You can also add a max-height, but if you do you perhaps have to set overflow-y to scroll aswel.

Answer 1

It's easy to enable word wrap in CodeMirror by setting the lineWrapping option to true. Example:

    <textarea id="code" name="code">
      ...
    </textarea>

    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        tabMode: "indent",
        matchBrackets: true,
        theme: "night",
        lineNumbers: true,
        lineWrapping: true,
        indentUnit: 4,
        mode: "text/javascript"
      });
    </script>