html - recomendado - Cree el tipo de entrada="botón" con dos líneas de texto para una versión más nueva de Chrome
tamaño para imagenes en wordpress (8)
Aceptaré una respuesta de "no es posible" si alguien puede explicar por qué. Sin embargo, no haré una respuesta con el uso de un <button> porque no es lo que esta pregunta está haciendo.
Estoy tratando de hacer un botón de entrada con dos líneas de palabras, pero las versiones más recientes de Chrome no me lo permiten, esto es lo que he intentado:
Separadores de retorno de carro
<input type="button" value="Line One Line Two"/>
<input type="button" value="Line One/r/nLine Two">
Sé que puedes usar white-space: normal; pero esto no te dejará donde quieras.
input[type="submit"] {
white-space: normal;
}
¿Hay alguna manera de que pueda agregar la nueva línea en el botón donde elija?
es decir
línea uno
línea dos
¿Podría esto ser útil? No es exactamente lo que pediste, lo sé ...
( note la diferencia de fuente también, ya que obtuve algunos votos positivos me encargué del problema de la fuente)
input{
font-family:inherit;
font-size:inherit;
}
#line1{
padding-bottom: 25px;
padding-left:5px;
text-align:left;
width:75px;/*Depends on the second line lengh*/
}
#line2{
margin-top: -23px;
padding-left:7px;
}
<input type="button" value="Line One" id="line1"/>
<div id="line2">Line Two</div>
@aardrian ha apuntado en la dirección correcta, también debe establecer -webkit-appearance como none para eliminar el estilo específico de la entrada.
CSS
input {
white-space: normal;
width: 50px;
-webkit-appearance: none;
background: #ddd;
border: none;
}
HTML
<input type="submit" value="Text1 Text2 Text3 Text4" />
Puede cambiar el ancho para permitir más palabras en cada fila.
Codepen : http://codepen.io/anon/pen/xOExpX
Parece que no hay manera de agregar html dentro del valor, el valor del valor siempre se sanea:
El atributo de contenido de valor proporciona el valor predeterminado del elemento de entrada. Cuando el atributo de contenido de valor se agrega, establece o elimina, si el indicador de valor sucio del control es falso, el agente de usuario debe establecer el valor del elemento en el valor del atributo de contenido de valor, si hay uno, o la cadena vacía de lo contrario, y luego ejecute el algoritmo de saneamiento de valor actual, si está definido.
Información : https://www.w3.org/TR/html5/forms.html#attr-input-value
A mi entender, no es posible lograr lo que desea con la entrada. El atributo "valor" tratará todo lo que está dentro como una cadena que se imprimirá en la pantalla. Por lo tanto, cualquier etiqueta <br /> se tratará como texto y no se procesará como HTML. No acepta ningún personaje de escape.
Su mejor opción es usar el botón como sugiere c-smile o puede crear un div, personalizarlo a su gusto y agregar un javascript al hacer clic, lo que provocará el envío de un formulario.
Alternativamente, si cree firmemente que tiene que usar información, puede hacer un poco de javascript (esto es solo si no sabe cuál es el ancho del ancho de las palabras).
Para que conste en acta, te recomiendo que solo uses un botón, así es como lo haces:
https://jsfiddle.net/bdLanac5/1/
var inputValue = $("#myInput").val();
var inputValues = inputValue.split(" ");
var longestValue = inputValues.reduce(function (a, b) { return a.length > b.length ? a : b; });
$("#myInput").val(longestValue);
var length = $("#myInput").outerWidth();
$("#myInput").css("width", length);
$("#myInput").val(inputValue);
input{
white-space: normal;
}
<input id="myInput" type="submit" value="This is a test"/>
Si conoce el ancho, elimine el javascript y agregue el ancho en css a su elemento de entrada.
Algo así como un truco, pero podría usar espacios regulares donde quiera que se rompa la línea y nbsp donde no lo haga, luego asegúrese de que el ancho esté configurado para alojarlo correctamente.
input{
white-space: normal;
width: 110px;
}
<input type="button" value="Text1 Text2 Text3 Text4" />
Aunque no puedo demostrar que no sea posible , no es una buena idea intentar que el botón de input ocupe varias líneas. En primer lugar, la especificación HTML5 dice solo esto sobre el atributo de value :
Si el elemento tiene un atributo de valor, la etiqueta del botón debe ser el valor de ese atributo
Observe que la "etiqueta del botón" no está definida en ninguna parte de la especificación. Eso significa que depende de los proveedores de navegadores elegir cómo interpretar eso, y también significa que pueden cambiar su interpretación a voluntad.
Acabas de ver cómo el equipo de Chrome decide hacer tal cambio. Podría volver a ocurrir, quizás en otro navegador. Por lo tanto, cualquier solución que encuentre ahora no será permanente y estará sujeta a los caprichos de los proveedores de navegadores.
Es por eso que recomiendo usar el elemento <button> . Porque está garantizado por la especificación para permitirle hacer formato HTML, como saltos de línea.
Cortar:
input[type="submit"] {
white-space: normal;
width: 7em;
}
El ancho debe corresponder a la palabra más larga. Esto no permite saltos de línea arbitrarios.
Mejor solución: use <button> .
Utilice <button type=submit> lugar.
<button type=submit>First line<br>Second line</button>
<input id="myInput" type="submit" value="Line OneLine Two"/>
input{
white-space: normal;
word-break: break-all;
}
#myInput{
width:73px;
}
Puedes dar tu propio ancho al botón.