¿Cómo ajustar el texto del botón HTML con ancho fijo?

197

Acabo de notar que si le das a un botón HTML un ancho fijo, el texto dentro del botón nunca se ajusta. Lo he intentado con el ajuste de palabras, pero esos cortes de la palabra a pesar de que hay espacios disponibles para ajustar.

¿Cómo puedo hacer el texto de un botón HTML con una envoltura de ancho fijo como lo haría cualquier celda de 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 agregar bordes y modificar el relleno. Si agrego word-wrap:break-worda este botón, lo envolverá así:

Roos Sturingen / Sen
sors

Y no quiero que se corte en el medio de una palabra si es posible cortarlo entre palabras.

Peter
fuente

Respuestas:

547

Descubrí que puedes hacer uso de la propiedad CSS de espacio en blanco:

white-space: normal;

Y romperá las palabras como texto normal.

Siu
fuente
@MGOwen está bien ahora, mientras tanto, atenuamos IE6.
low_rents
1
Las otras respuestas que sugieren word-wrap: break-word;no funcionaron para mí, pero esto sí.
F1Krazy
15
white-space: normal;
word-wrap: break-word;

El mío funciona con ambos

Ricardo
fuente
8

Puede forzarlo (si el navegador lo permite, imagino) insertando saltos de línea en la fuente HTML, de esta manera:

<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 en <BUTTON>lugar de un <INPUT>, tal que la etiqueta del botón es el contenido del elemento en lugar de su valueatributo, colocar ese contenido dentro de a <SPAN>con un widthatributo que es unos pocos píxeles más estrecho que el del botón parece hacer el truco (incluso en IE6 :-).

Brian Nixon
fuente
1
Para algo muy simple, también puede usar <button> con una <br> en el punto de ruptura deseado.
KevinH
Solía ​​funcionar, pero ya no funciona en versiones recientes de Chrome.
Joe Mabel
6

Descubrí que un botón funciona, pero que querrás agregarlo style="height: 100%;"para que muestre más que la primera línea en Safari para iPhone iOS 5.1.1

Nick Saemenes
fuente
3
   white-space: normal;
   word-wrap: break-word;

"Ambos" funcionó para mí.

Bhavani Raju
fuente
2

Los botones de varias líneas como ese no son realmente triviales de implementar. Esta página tiene una discusión interesante (aunque algo anticuada) sobre el tema. Probablemente, su mejor opción sería eliminar el requisito de varias líneas o crear un botón personalizado utilizando, por ejemplo, divsy CSS, y agregar un poco de JavaScript para que funcione como un botón.

Daan
fuente
El problema es que estoy usando ASP.Net, usando el control asp: button con los atributos CommandName y CommandArgument. No puedo simplemente usar otro control.
Peter
2

Si tenemos algunas divisiones internas dentro de la <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 lo intento

white-space: normal;

después de eliminar las propiedades css anteriores y hacer mi tarea.

¡La esperanza funcionará para todos!

S.Yadav
fuente
1
¿Cómo difiere esto de esta respuesta?
Christian Gollhardt
Es, si te das cuenta, lo he usado con la etiqueta del botón.
S.Yadav
Los divs no están permitidos dentro de un botón, no es HTML correcto.
Ian Devlin
1
word-wrap: break-word;

trabajó para mi.

Juubes
fuente