Текст CodeMirror (JS Code Highlight) в текстовом поле превышает ширину textarea

Я работал с CodeMirror сегодня, чтобы создать небольшую среду, где я могу редактировать некоторый PHP-код, который хранится в базе данных (да, я знаю, это может быть вредно, но PHP-код не подходит для обычных пользователей).

Все отлично работает, редактор работает, работает подсветка кода, работает вкладка отступа, но есть одна вещь, которая беспокоит меня какое-то время, и я не могу найти решения для этого. Код, который находится внутри моего текстового поля редактора CodeMirror, который длиннее текстового поля, превышает текстовое поле и исчезнет где-то из моего экрана (см. Скриншот в конце этого сообщения).

Я хотел бы, чтобы этот код продолжался в строке ниже (без добавления лишнего полотна пропускания). Это известная проблема и/или ее легко исправить?

Вот скриншот: http://www.pendemo.nl/codemirror.png

Спасибо заранее.

//Изменить: исправлено

Хорошо, понял, все было в файле CSS! Здесь исправление для любого, кто интересуется:

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

overflow-y: auto (высота выполняется автоматически, поэтому нет необходимости в вертикальной полосе прокрутки). переполнение-x: прокрутка; чтобы заставить CodeMirror добавить полосу прокрутки, а не ширину текстовой области. И они дают фиксированную ширину (px или процент). Вы также можете добавить max-height, но если вам, возможно, придется установить overflow-y для прокрутки aswel.

Ответ 1

Исправлено, см. вопрос для деталей, если кто-то еще может столкнуться с этой проблемой.

Ответ 2

Легко включить перенос слов в CodeMirror, установив для параметра lineWrapping значение true. Пример:

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

Ответ 3

Как заметил Крис выше, решение, описанное в вопросе, больше не работает (всегда?).

Однако добавление max-width: ...ex; в CSS, похоже, вынуждает горизонтальную полосу прокрутки.

(Без этого, например, просто используя width: ..., только конфигурация CodeMirror с lineWrapping: true (как в ответе на fywe) может помешать ей явно нарисовать поле для длинных строк, но у lineWrapping есть свои недостатки (например, навигация недружественная Home/End), чтобы это не помогло.)