ajuste de texto en el interior input type = "text" elemento HTML/CSS

El HTML se muestra a continuación,ajuste de texto en el interior input type = "text" elemento HTML/CSS

<input type="text"/>

se visualiza en un navegador, así:
This is how the above HTML is displayed in a browser.

Cuando agrego el texto siguiente ,

El rápido zorro marrón saltó sobre el perro perezoso.

Usando el HTML,

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

que se visualiza en un navegador, así:
This is how the above HTML is displayed in a browser.

pero me gustaría que se muestre en un navegador, así:
This is how I would like the above HTML to be displayed in a browser.

Quiero el te xt en mi elemento de entrada para envolver. ¿Se puede lograr esto sin un área de texto?

Fuente

2011-03-13 Web_Designer

No, no creo que pueda. Pero, ¿por qué un área de texto no es una opción? –

+11

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 envolver una sola línea de texto (Nota: No son lo mismo). –

Ese es el trabajo de textarea - para el ingreso de texto de líneas múltiples. El inputwon't do it; no fue diseñado para hacerlo.

Utilice un textarea. Además de sus diferencias visuales, se accede a ellos a través de JavaScript de la misma manera (use la propiedad value).

Puede evitar que se ingresen nuevas líneas mediante el evento input y simplemente usando replace(/\n/g, '').

Fuente

2011-03-13 00:48:08 alex

Bien, supongo que usaré un área de texto entonces. ¡Gracias! –

+18

Esto realmente no responde a la pregunta de cómo recolectar una sola línea de entrada mientras se muestra envuelta durante la entrada. – ehdv

@ehdv: Es la segunda mejor opción, ya que la pregunta no tiene respuesta. – rvighne

Palabra quebrar la voluntad imitar algunos de la intención

input.break { 
    word-wrap: break-word; 
    word-break: break-all; 
    height: 80px; 
}

Fuente

2015-08-04 16:27:26

Esta es la verdadera respuesta – userlond

¿Alguien sabe qué tan bien se implementa esto en todos los navegadores? – commonpike

Acabo de probarlo en Firefox 43.0.4 y no funciona, sin embargo, en Safari 9 y Chrome 48 parece funcionar: http://www.cssdesk.com/dbCSQ –

Puede no entrada de uso para ello, es necesario usar área de texto en su lugar. Uso área de texto con el código wrap="soft" y opcional el resto de los atributos de la siguiente manera:

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

Atributos: Para limitar la cantidad de texto en él, por ejemplo, a caracteres "40" se puede añadir el atributo maxlength="40" como esto: <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> Para ocultar el estilo del pergamino. si solo usa overflow:scroll; o overflow:hidden; o overflow:auto;, solo afectará a una barra de desplazamiento. Si quieres diferentes atributos para cada barra de desplazamiento a continuación, utilizar los atributos de este tipo overflow:scroll; overflow-x:auto; overflow-y:hidden; en el área de estilo: Para hacer el área de texto no se puede cambiar de tamaño se puede utilizar el estilo con resize:none; así:

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

De esa manera usted puede tener o ejemplo, 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 igual que un cuadro de texto de entrada, pero con filas en su lugar y sin utilizar texto de entrada.

NOTA: área de texto funciona con filas diferencia como entrada <input type="text" name="tbox" size="10"></input> que se hace para no trabajo con filas en absoluto.

Fuente

2017-03-01 16:58:57 SeekLoad

ajuste de texto en el interior input type = "text" elemento HTML/CSS

Respuesta

Cuestiones relacionadas