¿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 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.

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

white-space: normal;

Y romperá las palabras como texto normal.

white-space: normal;
word-wrap: break-word;

El mío funciona con ambos

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 :-).

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

   white-space: normal;
   word-wrap: break-word;

"Ambos" funcionó para mí.

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.

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!

word-wrap: break-word;

trabajó para mi.