Comment envelopper le texte du bouton HTML avec une largeur fixe?

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é. Je l'ai essayé avec le retour automatique à la ligne, mais cela coupe le mot même s'il y a des espaces disponibles pour le retour à la ligne.

Comment puis-je faire le texte d'un bouton HTML avec une enveloppe à largeur fixe comme le ferait n'importe quelle nappe?

<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 que rajouter des bordures et modifier le remplissage. 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 coupe au milieu d'un mot s'il est possible de le couper entre les mots.

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

white-space: normal;

Et cela cassera les mots en tant que texte normal.

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

Le mien fonctionne avec les deux

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, déterminer où placer les sauts de ligne n'est pas nécessairement trivial ...

Si vous pouvez utiliser un code HTML <BUTTON>au lieu d'un <INPUT>, de sorte que l'étiquette du bouton soit le contenu de l'élément plutôt que son valueattribut, le fait de placer ce contenu à l'intérieur d'un <SPAN>avec un widthattribut de quelques pixels plus étroit que celui du bouton semble faire l'affaire (même dans IE6 :-).

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

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

"Les deux" ont fonctionné pour moi.

Les boutons multi-lignes comme celui-ci ne sont pas vraiment triviaux à mettre en œuvre. Cette page a une discussion intéressante (quoique quelque peu datée) sur le sujet. Votre meilleur pari serait probablement de supprimer l'exigence multiligne ou de créer un bouton personnalisé en utilisant par exemple divs et CSS, et en ajoutant du JavaScript pour le faire fonctionner comme un bouton.

Si nous avons des divisions internes à l'intérieur de la <button>balise comme celle-ci-

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

Parfois, le texte de la classe A se chevauche sur les données de la classe 1 car ces deux éléments se trouvent dans une seule balise de bouton. J'essaye de casser le tex en utilisant-

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

Mais ça ne marchera pas, alors j'essaye-

white-space: normal;

après avoir supprimé les propriétés css ci-dessus et accompli ma tâche.

L'espoir fonctionnera pour tous !!!

word-wrap: break-word;

travaillé pour moi.