Como quebrar o texto do botão HTML com largura fixa?

Acabei de notar que, se você der uma largura fixa a um botão HTML, o texto dentro do botão nunca será quebrado. Eu tentei com quebra de linha, mas isso corta a palavra mesmo que haja espaços disponíveis para quebra.

Como posso criar o texto de um botão HTML com uma quebra de largura fixa, como faria qualquer célula de tablete?

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

As classes CSS não fazem nada além de adicionar bordas e modificar o preenchimento. Se eu adicionar word-wrap:break-worda este botão, ele o envolverá assim:

Roos Sturingen / Sen
sors

E não quero cortar no meio de uma palavra, se for possível cortá-la entre as palavras.

Descobri que você pode fazer uso da propriedade CSS de espaço em branco:

white-space: normal;

E isso quebrará as palavras como texto normal.

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

A mina trabalha com ambos

Você pode forçá-lo (se o navegador permitir, imagino) inserindo quebras de linha na fonte HTML, assim:

<INPUT value="Line 1
Line 2">

É claro que trabalhar onde colocar as quebras de linha não é necessariamente trivial ...

Se você pode usar um HTML em <BUTTON>vez de um <INPUT>, de modo que o rótulo do botão seja o conteúdo do elemento, e não o seu valueatributo, colocar esse conteúdo dentro de um <SPAN>com um widthatributo que é alguns pixels mais estreito que o do botão parece fazer o truque (até no IE6 :-).

Descobri que um botão funciona, mas você deseja adicioná style="height: 100%;"-lo para que ele apareça mais do que a primeira linha no Safari para iPhone iOS 5.1.1

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

"Ambos" funcionaram para mim.

Botões de várias linhas como esse não são realmente triviais de implementar. Esta página tem uma discussão interessante (embora um pouco datada) sobre o assunto. Sua melhor aposta provavelmente seria descartar o requisito de várias linhas ou criar um botão personalizado usando, por exemplo div, se CSS e adicionar um pouco de JavaScript para fazê-lo funcionar como um botão.

Se tivermos algumas divisões internas dentro de <button>tags 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>

Em algum momento, o texto da classe A se sobrepõe aos dados da classe1 porque ambos estão em uma única tag de botão. Eu tento quebrar o tex usando-

 word-wrap: break-word;         /* All browsers since IE 5.5+ */
 overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */ 

Mas isso não funcionou, então eu tento isso-

white-space: normal;

depois de remover as propriedades css acima e concluí minha tarefa.

Espero que funcione para todos !!!

word-wrap: break-word;

trabalhou para mim.