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í:
Así es como se muestra el HTML anterior en un navegador.

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í:
Así es como se muestra el HTML anterior en un navegador.

Pero me gustaría que se muestre en un navegador como este:
Así es como me gustaría que se muestre el HTML anterior en un navegador.

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

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