¿Cómo eliminar word wrap del área de texto?

146

mi área de texto simple no muestra una barra horizontal cuando el texto se desborda. Envuelve el texto para una nueva línea. Entonces, ¿cómo elimino wordwrap y visualizo la barra horizontal cuando el texto se desborda?

html textarea word-wrap Corazón de piedra
fuente
¿Te refieres a HTML? ¿Columpio? ¿algo más?
ksuralta
Se agregó una etiqueta HTML para evitar esa confusión, pero solo estoy adivinando por las respuestas actuales.
Sergio Acosta

Respuestas:

142

Las áreas de texto no deberían ajustarse de manera predeterminada, pero puede configurar wrap = "soft" para deshabilitar explícitamente el ajuste:

<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>

EDITAR: El atributo "wrap" no es oficialmente compatible. Lo obtuve de la página alemana SELFHTML (una fuente en inglés está aquí ) que dice que IE 4.0 y Netscape 2.0 lo admiten. También lo probé en FF 3.0.7 donde funciona como se supone. Las cosas han cambiado aquí, SELFHTML ahora es un wiki y el enlace fuente en inglés está muerto.

EDIT2: si desea asegurarse de que todos los navegadores lo admitan, puede usar CSS para cambiar el comportamiento de ajuste:

Usando hojas de estilo en cascada (CSS), puede lograr el mismo efecto con white-space: nowrap; overflow: auto;. Por lo tanto, el atributo de ajuste puede considerarse obsoleto.

Desde aquí (parece ser una excelente página con información sobre textarea).

EDIT3: no estoy seguro de cuándo cambió (según los comentarios, debe haber sido alrededor de 2014), pero wrapahora es un atributo oficial de HTML5, vea w3schools . Cambió la respuesta para que coincida con esto.

Schnaader
fuente
9
El atributo "wrap" funciona en Firefox 3.6, pero no es HTML5 válido. Sin embargo, la solución CSS no funciona, como si se ignora "white-space: nowrap".
Clint Pachl
9
white-space: pre;(o pre-line/ pre-wrap) tuvo el mismo efecto que wrap="off"para mí (mientras white-space: nowrapque no respetó el padding)
philfreo
55
@ClintPachl En realidad, wrapes HTML5 válido ... su configuración es ahora "hard"y "soft"( ref )
Mottie
44
@Mottie Sería mucho mejor vincular a la versión actual de la especificación HTML5 que a los documentos de Mozilla. Aquí está el enlace para la versión actual: w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap
Piotr Dobrogost
2
wrap="off"¡ya no es válido, sin embargo, es un requisito tanto para IE como para Edge!
Jools
161 
textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowraptambién funciona si no te importa el espacio en blanco, pero por supuesto no lo quieres si estás trabajando con código (o párrafos sangrados o cualquier contenido donde pueda haber múltiples espacios deliberadamente) ... así que prefiero pre.

overflow-wrap: normal(estaba word-wrapen navegadores antiguos) es necesario en caso de que algún padre haya cambiado esa configuración; puede causar envoltura incluso si preestá configurado.

también - al contrario de la respuesta aceptada actualmente - las áreas de texto no suelen envolver por defecto. pre-wrapparece ser el predeterminado en mi navegador.

Parcialmente nublado
fuente
18
¡Con FF 20, aún necesita wrap = "off" en la etiqueta html textarea! Esta tecnología es una mierda tan inconsistente.
Lawrence Dol
3
+1 por proporcionar una solución CSS y señalar que las
áreas de texto se ajustan
1
Ah, parece que hay una solicitud de función en Firefox desde 2001, pero con algunas recientes (2014) los comentarios de apoyo para el comportamiento Chrome dev por Ehsan Akhgari: bugzilla.mozilla.org/show_bug.cgi?id=82711 . ¡Ve y vota!
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
1
Esto ahora funciona en Firefox (canal Aurora, v36) - vea jsfiddle.net/mlhDevelopment/gvjy14xu el área de texto verde.
mlhDev
2
En lo personal, creo que es mejor sustituir overflow-x: scrollcon overflow: auto. Las barras de desplazamiento reducen el espacio de escritura disponible en el área de texto. Además, IE11 renderizó una barra de desplazamiento vertical innecesariamente a su manera, pero la overflow: autoarregló.
Sam
19

La siguiente solución basada en CSS funciona para mí:

<html>
 <head>
  <style type='text/css'>
   textarea {
    white-space: nowrap;
    overflow:    scroll;
    overflow-y:  hidden;
    overflow-x:  scroll;
    overflow:    -moz-scrollbars-horizontal;
   }
  </style>
 </head>
 <body>
  <form>
   <textarea>This is a long line of text for testing purposes...</textarea>
  </form>
 </body>
</html>
Galghamon
fuente
15

Encontré una manera de hacer un área de texto con todo esto funcionando al mismo tiempo:

  • Con barra de desplazamiento horizontal
  • Texto multilínea de apoyo
  • El texto no se ajusta.

Funciona bien en:

  • Chrome 15.0.874.120
  • Firefox 7.0.1
  • Opera 11.52 (1100)
  • Safari 5.1 (7534.50)
  • IE 8.0.6001.18702

Permítanme explicar cómo llego a eso: estaba usando la herramienta integrada del inspector de Chrome y vi valores en los estilos CSS, así que pruebo estos valores, en lugar de los normales ... prueba y errores hasta que lo reduje al mínimo y aquí está es para quien lo quiera.

En la sección CSS utilicé esto para Chrome, Firefox, Opera y Safari:

textarea {
  white-space:nowrap;
  overflow:scroll;
}

En la sección CSS utilicé solo esto para IE:

textarea {
  overflow:scroll;
}

Fue un poco complicado, pero está el CSS.

Una etiqueta (x) HTML como esta:

<textarea id="myTextarea" rows="10" cols="15"></textarea>

Y al final de la <head>sección, un JavaScript como este:

 window.onload=function(){
   document.getElementById("myTextarea").wrap='off';
 }

El JavaScript es para hacer que el validador W3C pase XHTML 1.1 Strict, ya que el atributo wrap no es oficial y, por lo tanto, no puede ser una etiqueta (x) HTML directamente, pero la mayoría de los navegadores lo manejan, por lo que después de cargar la página establece ese atributo.

Espero que esto se pueda probar en más navegadores y versiones y que ayude a alguien a mejorarlo y lo haga completamente cruzado para todas las versiones.

z666zz666z
fuente
44
+1 .wrap = 'off' es la magia que hizo el truco en FF 14.0.1 ... Gracias.
Shanimal
Parece que JavaScript no funciona en Safari 5.0.6 (última versión de PPC), aunque puede usar wrap = "off" en el HTML.
.wrap es lo que lo hizo por mí, usando Chrome. También lo usé junto con el no-wrap en css.
MineAndCraft12
wrap = 'off' hizo que IE se comportara como los otros navegadores.
Rand Scullard
4

Esta pregunta parece ser la más popular para deshabilitar textareawrap. Sin embargo, a partir de abril de 2017, encuentro que IE 11 (11.0.9600) no deshabilitará el ajuste de texto con ninguna de las soluciones anteriores.

La única solución que funciona para IE 11 es wrap="off". wrap="soft"y / o los diversos atributos CSS como white-space: prealter donde IE 11 elige ajustarse pero aún se ajusta en algún lugar. Tenga en cuenta que he probado esto con o sin Vista de compatibilidad . IE 11 es bastante compatible con HTML 5, pero no en este caso.

Por lo tanto, para lograr líneas que conserven su espacio en blanco y salgan del lado derecho que estoy usando:

<textarea style="white-space: pre; overflow: scroll;" wrap="off">

Afortunadamente, esto también parece funcionar en Chrome y Firefox. No estoy defendiendo el uso de pre-HTML 5 wrap="off", solo digo que parece ser necesario para IE 11.

JonBrave
fuente
¡Agradable, me salvó el día! Me estaba rompiendo la cabeza por qué la adición programática de nuevas líneas falló al usar el código de la respuesta aceptada.
Tum
1
Este error de IE también se ha transferido a Edge
Jools
3

Si puede usar JavaScript, la siguiente podría ser la opción más portátil hoy (probado Firefox 31, Chrome 36):

http://jsfiddle.net/cirosantilli/eaxgesoq/

<style>
  div#editor {
    white-space: pre;
    word-wrap: normal;
    overflow-x: scroll;
  }
<style>
<div contenteditable="true"></div>

Parece que no hay una solución CSS estándar y portátil:

Además, si puede usar Javascript, también podría usar el editor ACE:

http://jsfiddle.net/cirosantilli/bL9vr8o8/

<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<div id="editor">content</div>
<script>
  var editor = ace.edit('editor')
  editor.renderer.setShowGutter(false)
</script>

Probablemente funciona con ACE porque no utiliza textareaninguno de los cuales está poco especificado / implementado de manera incoherente, pero no está seguro de si se utiliza contenteditable.

Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
fuente