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

Les boutons multi-lignes de ce type ne sont pas vraiment triviaux à mettre en œuvre. Cette page propose une discussion intéressante (bien que quelque peu datée) sur le sujet. Votre meilleure option serait probablement d'abandonner l'exigence des lignes multiples ou de créer un bouton personnalisé en utilisant, par exemple, les éléments suivants div et CSS, et en ajoutant un peu de JavaScript pour le faire fonctionner comme un bouton.

Answer 2

Si nous avons des divisions internes à l'intérieur <button> comme ceci-

<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 superpose aux données de la classe 1 parce que les deux sont dans un seul bouton. J'essaie de séparer le texte en utilisant

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

Mais ça n'a pas marché alors j'ai essayé ça

white-space: normal;

après avoir supprimé les propriétés css ci-dessus, j'ai réussi à accomplir ma tâche.

L'espoir marchera pour tous ! !!

Answer 3

word-wrap: break-word;

a fonctionné pour moi.