css - too - Relleno de entrada cortando texto en Firefox

word-break vs word-wrap

Question

En Firefox, cuando uso un elemento de entrada de control de forma bootstrap, si relleno el elemento de entrada, recorta el texto rellenándolo hacia adentro en lugar de alrededor del texto. Solo parece tener este efecto en firefox. Este jsfiddle demuestra el problema:

http://jsfiddle.net/v76xB/

Formulario de entrada html:

<input id="name" type="text" class="form-control join-form" placeholder="Enter a Username">

CSS:

.join-form {
    padding: 24px; /*comment this out to see effect of padding */
    margin: 12px 0px;
    font-size: 16px;
    letter-spacing: 0px;
    font-weight: 300;
}

Esto es tan específico como puedo replicar este error. También tengo la mitad de la esperanza de que sea solo una peculiaridad del navegador, completamente relacionada conmigo, pero no puedo comprobar si estoy trabajando individualmente y solo tengo una máquina.

Answer 1

Agregue la propiedad de altura y luego aplique el relleno como abajo. Ahora puedes ver que tanto firefox como chrome se comportarán igual.

.join-form {
padding: 20px; /*comment this out to see effect of padding */
margin: 12px 0px;
font-size: 16px;
letter-spacing: 0px;
font-weight: 300;
height:60px;
}

DEMO

Answer 2

La clase de control de formulario Bootstrap obtiene una altura fija de forma predeterminada. Simplemente añada una height: auto; a su .join-form (para mantener la flexibilidad), y cambie el relleno para obtener el efecto original, como este padding: 14px 20px;

Vea aquí: http://jsfiddle.net/x78Bh/