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

197

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.

Peter
la source

Réponses:

547

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.

Siu
la source
@MGOwen ça va maintenant - nous avons amorti IE6 en attendant.
low_rents
1
Les autres réponses suggérant word-wrap: break-word;ne fonctionnaient pas pour moi, mais cela a fonctionné.
F1Krazy
15
white-space: normal;
word-wrap: break-word;

Le mien fonctionne avec les deux

Richard
la source
8

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 :-).

Brian Nixon
la source
1
Pour quelque chose de très simple, vous pouvez également utiliser <button> avec un <br> au point d'arrêt souhaité.
KevinH
Utilisé pour fonctionner, mais ne fonctionne plus dans les versions récentes de Chrome.
Joe Mabel
6

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

Nick Saemenes
la source
3
   white-space: normal;
   word-wrap: break-word;

"Les deux" ont fonctionné pour moi.

Bhavani Raju
la source
2

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.

Daan
la source
Le problème est que j'utilise ASP.Net, en utilisant le contrôle asp: button avec les attributs CommandName et CommandArgument. Je ne peux pas simplement utiliser un autre contrôle.
Peter
2

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

S.Yadav
la source
1
En quoi cela diffère-t-il de cette réponse?
Christian Gollhardt
C'est, si vous remarquez, je l'ai utilisé avec la balise bouton.
S.Yadav
Les divs ne sont pas autorisées dans un bouton, ce n'est pas du HTML correct.
Ian Devlin
1
word-wrap: break-word;

travaillé pour moi.

Juubes
la source