Envolver el texto dentro del tipo de entrada = elemento "texto" HTML / CSS

96

El HTML que se muestra a continuación,

<input type="text"/>

se muestra en un navegador así:

Cuando agrego el siguiente texto,

El veloz zorro marrón saltó sobre el perro perezoso.

Usando el HTML a continuación,

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

se muestra en un navegador así:

Pero me gustaría que se muestre en un navegador como este:

Quiero que el texto de mi elemento de entrada se ajuste. ¿Se puede lograr esto sin un área de texto?

html input word-wrap Diseñador web
fuente
3
No, no creo que pueda. Pero, ¿por qué un área de texto no es una opción?
Pekka
35
El uso de un área de texto a veces no es una opción porque no desea permitir la entrada de varias líneas de texto. Solo para ajustar una sola línea de texto (Nota: no son lo mismo).
Flatliner DOA
Hay una solución discutida para este propósito exacto con el CSSWG para la estandarización, aunque lamentablemente no puedo encontrar el problema.
Nulo
Lo encontré; github.com/w3c/csswg-drafts/issues/2141
Nulo
1
@Pekka 웃 no es que sea relevante, pero algunas razones incluyen: no podemos usar la validación html5 en áreas de texto; no podemos usar restricciones de patrón para validar áreas de texto; un área de texto es un sinónimo innecesario para un tipo de entrada = texto (¡es una entrada que es tipo texto!) lo que significa el doble de estilo, etc., etc. En resumen, hay muchas razones.
Peter Konga-Kamau

Respuestas:

62

Ese es el textareatrabajo del ', para la entrada de texto de varias líneas. El input no lo hará ; no fue diseñado para hacerlo.

Entonces usa un textarea. Además de sus diferencias visuales, se accede a ellos a través de JavaScript de la misma manera ( valuepropiedad de uso ).

Puede evitar que se ingresen nuevas líneas a través del inputevento y simplemente usando un replace(/\n/g, '').

alex
fuente
69
Esto realmente no responde a la pregunta de cómo recopilar una sola línea de entrada mientras se muestra envuelta durante la entrada.
ehdv
3
Un problema importante con esto es que un área de texto suprime el botón Ir en los dispositivos móviles.
Dan
2
@alex Exactamente. Entonces, si desea una entrada real de varias líneas, entonces un área de texto es mejor, pero si solo desea una entrada envuelta en palabras, entonces la solución css es mejor.
Dan
1
Estaba a punto de decir que <textarea>no funcionará con cosas como el autocompletado de jQuery, pero simplemente cambie <input>a <textarea>y eso es todo lo que es necesario. ¡Hurra por los estándares!
Sablefoste
9
Como se dijo anteriormente: ¡Envolver una línea! == una cadena de varias líneas. No estoy seguro de por qué esta es la respuesta aceptada, ya que no responde a la pregunta.
mattLummus
37

Word Break imitará algunas de las intenciones

    input[type=text] {
        word-wrap: break-word;
        word-break: break-all;
        height: 80px;
    }
<input type="text" value="The quick brown fox jumped over the lazy dog" />
Expandir fragmento

Como solución alternativa, esta solución perdió su eficacia en algunos navegadores. Consulte la demostración: http://cssdesk.com/dbCSQ

Thiago Macedo
fuente
7
Acabo de probarlo en Firefox 43.0.4 y no funciona, sin embargo, en Safari 9 y Chrome 48 parece funcionar: cssdesk.com/dbCSQ
Jason Sperske
6
La demostración adjunta de @JasonSperske no me funciona ni en Firefox 45 ni en Chrome 50.
czerny
La demostración funciona para mí en Chrome 48 en Linux, pero el mismo CSS en mi propia página no.
Mnebuerquo
40
La solución quedó desactualizada al menos desde Chrome 50 :(
userlond
4
Olvídese de esta solución: no funciona con Chrome 74/75, Firefox 63/67, Edge 42, IE 11 y UCBrowser 7.0 (pero funciona con GNOME Web 3.28 - AppleWebKit / 605.1.15)
tanguy_k
10

Puede no utilizar la entrada para ello, es necesario utilizar área de texto en su lugar. Use textarea con el wrap="soft"código y opcional el resto de los atributos como este:

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

Atributos: Para limitar la cantidad de texto en él, por ejemplo, a "40" caracteres, puede agregar el atributo de maxlength="40"esta manera: <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> Para ocultar el estilo del desplazamiento. si solo usa overflow:scroll;o overflow:hidden;o overflow:auto;solo tendrá efecto para una barra de desplazamiento. Si desea diferentes atributos para cada barra de desplazamiento, use los atributos como este overflow:scroll; overflow-x:auto; overflow-y:hidden;en el área de estilo: Para hacer que el área de texto no sea redimensionable, puede usar el estilo con resize:none;esto:

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

De esa manera, puede tener un ejemplo de un área de texto con 14 filas y 10 columnas con ajuste de palabras y una longitud máxima de caracteres de "40" que funciona exactamente como lo hace un cuadro de texto de entrada, pero con filas en su lugar y sin usar texto de entrada.

NOTA: textarea funciona con filas a diferencia de la entrada similar <input type="text" name="tbox" size="10"></input>que está hecha para no funcionar con filas en absoluto.

SeekLoad
fuente
7

Para crear una entrada de texto en la que el valor bajo el capó es una cadena de una sola línea pero se presenta al usuario en un formato envuelto en palabras, puede usar el atributo contenteditable en uno <div>u otro elemento:

const el = document.querySelector('div[contenteditable]');

// Get value from element on input events
el.addEventListener('input', () => console.log(el.textContent));

// Set some value
el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'
div[contenteditable] {
  border: 1px solid black;
  width: 200px;
}
<div contenteditable></div>
Expandir fragmento

Sam Herrmann
fuente