Comment envelopper le texte du bouton html avec une largeur fixe

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

Comment puis-je faire le texte d'un bouton html avec une largeur fixe comme n'importe quelle tablecell?

<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 que d'ajouter des bordures et de modifier le remplissage. Si j'ajoute word-wrap: break-word à ce bouton, il l'enveloppera comme ce:

Roos Sturingen / Sen
sors

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

Merci

157
demandé sur Peter 2009-05-14 11:28:12

8 réponses

J'ai trouvé que vous pouvez utiliser la propriété CSS white-space:

white-space: normal;

Et il va casser les mots comme texte normal.

J'espère que ça aide.

419
répondu Siu 2011-08-15 13:03:51

Vous pouvez le forcer (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 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 attribut value, placer ce contenu dans un <SPAN> avec un attribut width qui est de quelques pixels plus étroit que celui du bouton semble faire l'affaire (même dans IE6: -).

8
répondu Brian Nixon 2010-05-01 19:42:03

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

6
répondu Nick Saemenes 2012-07-12 13:09:41
white-space: normal;
word-wrap: break-word;

Le mien fonctionne avec les deux

4
répondu Richard 2017-08-18 00:17:17

Si nous avons des divisions internes à l'intérieur de la balise <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 chevauche sur les données de class1 parce que ces deux sont dans une seule balise de bouton. J'essaie 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 cela ne fonctionnera pas alors j'essaie ceci -

white-space: normal;

Après avoir supprimé les propriétés CSS ci-dessus et j'ai fait ma tâche.

L'espoir fonctionnera pour tous !!!

2
répondu S.Yadav 2017-02-22 09:32:01

Les boutons multi-lignes comme ça ne sont pas vraiment triviaux à implémenter. cette page a une discussion intéressante (bien que quelque peu datée) sur le sujet. Votre meilleur pari serait probablement de supprimer l'exigence multi-ligne 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.

1
répondu Daan 2009-05-14 08:22:35
word-wrap: break-word;

Travaillé pour moi.

1
répondu Juubes 2016-11-26 19:34:35
   white-space: normal;
   word-wrap: break-word;

"Les deux" ont fonctionné pour moi.

1
répondu Bhavani Raju 2018-06-13 11:08:29