CodeMirror (JS Code Highlight) texto en textarea excede textarea ancho

Question

He estado trabajando con CodeMirror hoy para crear un pequeño entorno donde puedo editar algunos códigos PHP que están almacenados en una base de datos (sí, sé que esto podría ser dañino , pero el código PHP no es accesible para usuarios normales).

Everythings funciona muy bien, el editor funciona, funciona el resaltado de código, las pestañas de sangría funcionan, pero hay una cosa que me está molestando desde hace un tiempo y parece que no puedo encontrar una solución a esto. El código que está dentro de mi textarea del editor CodeMirror, que es más largo que el área de texto excede el área de texto y desaparecerá en algún lugar fuera de mi pantalla (vea la captura de pantalla al final de esta publicación).

Me gustaría tener este código para continuar en la línea a continuación (sin agregar un número de línea extra por supuesto). ¿Es este un problema conocido y/o fácil de corregir?

Aquí hay una captura de pantalla: http://www.pendemo.nl/codemirror.png

Gracias de antemano.

// Editar: se fija

Ok, lo tengo resuelto, parecía estar en el archivo CSS! Aquí está la solución para cualquier persona que esté interesada:

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

desbordamiento-y: auto (altura se está haciendo auto, así que no hay necesidad de una barra de desplazamiento vertical). overflow-x: scroll; para obligar a CodeMirror a agregar una barra de desplazamiento en lugar de exceder el ancho del área de texto. Y dan un ancho fijo (px o porcentaje). También puede agregar una altura máxima, pero si lo hace quizás tenga que configurar overflow-y para desplazarse aswel.

Answer 1

Se ha solucionado, consulta la pregunta para conocer los detalles si alguien más puede toparse con este problema.

Answer 2

Es fácil habilitar el ajuste de palabras en CodeMirror configurando la opción lineWrapping en true. Ejemplo:

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

Answer 3

Como Chris comentó anteriormente, la solución descrita en la pregunta no (siempre?) Trabajar más.

Sin embargo, agregar max-width: ...ex; a CSS parece forzar una barra de desplazamiento horizontal.

(Sin que, por ejemplo, simplemente usando width: ..., solamente la configuración CodeMirror con lineWrapping: true (como en la respuesta de FYWE) podría impedir que se extiende descaradamente la caja para líneas largas, pero lineWrapping tiene sus propios inconvenientes (por ejemplo, Inicio/Fin de navegación hostil manejo), por lo que puede no ser de mucha ayuda.)