Comment envelopper le texte d'un bouton HTML à largeur fixe ?

Question

Je viens de remarquer que si vous donnez à un bouton HTML une largeur fixe, le texte à l'intérieur du bouton n'est jamais enveloppé. J'ai essayé avec word-wrap, mais cela coupe le mot même s'il y a des espaces disponibles pour l'envelopper.

Comment puis-je faire en sorte que le texte d'un bouton HTML à largeur fixe s'enroule comme le ferait une cellule de tableau ?

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

Les classes CSS ne font rien d'autre qu'ajouter des bordures et modifier le rembourrage. Si j'ajoute word-wrap:break-word à ce bouton, il l'enveloppera comme ceci :

Roos Sturingen / Sen
sors

Et je ne veux pas qu'il se coupe au milieu d'un mot s'il est possible de le faire entre les mots.

Answer 1

J'ai découvert que vous pouvez utiliser la propriété CSS "espace blanc" :

white-space: normal;

Et il brisera les mots comme du texte normal.

Answer 2

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

Le mien fonctionne avec les deux

Answer 3

Vous pouvez le forcer (si le navigateur le permet, j'imagine) en insérant des sauts de ligne dans la source HTML, comme ceci :

<INPUT value="Line 1
Line 2">

Bien sûr, trouver où placer les sauts de ligne n'est pas nécessairement trivial...

Si vous pouvez utiliser un HTML <BUTTON> au lieu d'un <INPUT> de manière à ce que l'étiquette du bouton soit le contenu de l'élément plutôt que son nom. value en plaçant ce contenu à l'intérieur d'un <SPAN> avec un width qui est quelques pixels plus étroit que celui du bouton semble faire l'affaire (même dans IE6 :-).

Answer 4

J'ai trouvé qu'un bouton fonctionne, mais que vous voudrez ajouter style="height: 100%;" au bouton pour qu'il affiche plus que la première ligne sur Safari pour iPhone iOS 5.1.1

Answer 5

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

"Les deux" a fonctionné pour moi.