web-dev-qa-db-fra.com

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

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

Comment puis-je créer le texte d'un bouton HTML avec une enveloppe de largeur fixe, comme le ferait une 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 rien d'autre que d'ajouter des bordures et de modifier le remplissage. Si j'ajoute Word-wrap:break-Word à ce bouton, il sera comme suit:

Roos Sturingen / Sen
sors

Et je ne veux pas que cela soit coupé au milieu d'un mot s'il est possible de le couper entre des mots.

htmlcssbuttonword-wrap
181
Peter

J'ai découvert que vous pouvez utiliser la propriété CSS des espaces blancs:

white-space: normal;

Et cela cassera les mots en texte normal.

492
Siu
white-space: normal;
Word-wrap: break-Word;

Le mien fonctionne avec les deux

9
Richard

Vous pouvez le forcer (si le navigateur le permet, j'imagine) en insérant des sauts de ligne dans le code 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>, tel que le libellé du bouton représente le contenu de l'élément plutôt que son attribut value, placez 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
Brian Nixon

J'ai constaté qu'un bouton fonctionnait, mais que vous souhaitiez ajouter style="height: 100%;" au bouton pour qu'il affiche davantage que la première ligne de Safari pour iPhone iOS 5.1.1.

6
Nick Saemenes

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 class1 car elles sont toutes deux 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 ça ne marchera pas alors j'essaye ça-

white-space: normal;

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

J'espère que ça marchera pour tous !!!

2
S.Yadav
Word-wrap: break-Word;

a travaillé pour moi.

1
Juubes
   white-space: normal;
   Word-wrap: break-Word;

"Les deux" ont fonctionné pour moi.

1
Bhavani Raju

Des boutons de plusieurs lignes comme ceux-là ne sont pas vraiment simples à mettre en œuvre. Cette page a une discussion intéressante (quoique quelque peu datée) sur le sujet. Votre meilleur choix serait probablement de supprimer l'exigence multiligne ou de créer un bouton personnalisé à l'aide de, par exemple. divs et CSS, et l'ajout de JavaScript pour qu'il fonctionne comme un bouton.

1
Daan