Cómo ajustar el texto del botón html con ancho fijo
Acabo de notar que si le das a un botón html un ancho fijo, el texto dentro del botón nunca se envuelve. Lo he probado con word-wrap, pero eso corta la palabra a pesar de que hay espacios disponibles para envolver.
¿Cómo puedo hacer que el texto de un botón html con un ajuste de ancho fijo como lo haría cualquier tabla?
<td class="category_column">
<input type="submit" name="ctl00$ContentPlaceHolder1$DataList1$ctl12$ProCat_NameButton"
value="Roos Sturingen / Sensors"
id="ctl00_ContentPlaceHolder1_DataList1_ctl12_ProCat_NameButton"
class="outset"
style="height:118px;width:200px;font-size:18px;color:#7F7F7F;width:200px;white-space:pre;" />
</td>
Las clases css no hacen más que añadir bordes y modificar el relleno. Si agrego word-wrap: break-word a este botón, lo envolverá como esto:
Roos Sturingen / Sen
sors
Y no quiero que se corte en medio de una palabra si es posible cortarlo entre palabras.
Gracias
8 answers
He encontrado que se puede hacer uso de la propiedad css espacio en blanco:
white-space: normal;
Y romperá las palabras como texto normal.
Espero que ayude.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-15 13:03:51
Puede forzarlo (si el navegador lo permite, me imagino) insertando saltos de línea en la fuente HTML, así:
<INPUT value="Line 1
Line 2">
Por supuesto, averiguar dónde colocar los saltos de línea no es necesariamente trivial...
Si puede usar un HTML <BUTTON> en lugar de un <INPUT>, de modo que la etiqueta del botón sea el contenido del elemento en lugar de su atributo value, colocar ese contenido dentro de un <SPAN> con un atributo width que es unos pocos píxeles más estrecho que el del botón parece hacer el truco (incluso en IE6 :-).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-01 19:42:03
He encontrado que un botón funciona, pero que querrás agregar style="height: 100%;" al botón para que muestre más que la primera línea en Safari para iPhone iOS 5.1.1
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-12 13:09:41
white-space: normal;
word-wrap: break-word;
El mío funciona con ambos
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-18 00:17:17
Si tenemos algunas divisiones internas dentro de <button> etiqueta como esta -
<button class="top-container">
<div class="classA">
<div class="classB">
puts " some text to get print."
</div>
</div>
<div class="class1">
<div class="class2">
puts " some text to get print."
</div>
</div>
</button>
En algún momento el texto de la clase A se superpone en los datos de la clase 1 porque ambos están en una sola etiqueta de botón. Intento romper el tex usando -
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
Pero esto no funcionará entonces intento esto -
white-space: normal;
Después de eliminar las propiedades css anteriores y terminé mi tarea.
¡La esperanza funcionará para todos !!!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-22 09:32:01
Los botones multilínea como ese no son realmente triviales de implementar. Esta página tiene una discusión interesante (aunque algo anticuada) sobre el tema. Su mejor apuesta probablemente sería eliminar el requisito de varias líneas o crear un botón personalizado usando, por ejemplo, divs y CSS, y agregar algo de JavaScript para que funcione como un botón.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-05-14 08:22:35
word-wrap: break-word;
Funcionó para mí.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-26 19:34:35
white-space: normal;
word-wrap: break-word;
"Ambos" funcionaron para mí.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-13 11:08:29