Comment faire pour envelopper le texte du bouton html avec la 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 du mot, même si il ya des espaces disponibles pour envelopper.

Comment puis-je faire le texte d'un bouton html avec un wrap de largeur fixe comme n'importe quel 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 mot-wrap: break-word à ce bouton, il se terminera comme ceci:

Roos Sturingen/Sen 
sors 

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

Merci

Answer 1

Je trouve que vous pouvez utiliser la propriété CSS white-space:

white-space: normal; 

Et il brisera les mots comme du texte normal.

Espérons que ça aide.

Answer 2

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

Answer 3

Vous pouvez forcer (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 travail où placer la casse ligne n'est pas nécessairement trivial .. . étroite

Si vous pouvez utiliser un HTML <BUTTON> au lieu d'un <INPUT>, de telle sorte que l'étiquette du bouton est le contenu de l'élément plutôt que son attribut value, plaçant ce contenu dans un <SPAN> avec un attribut width qui est quelques pixels que de le bouton semble faire l'affaire (même dans IE6 :-).

Answer 4

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

Answer 5

word-wrap: break-word; 

travaillé pour moi.

Answer 6

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

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

Quelque temps Texte de la classe A se chevauchent sur les données de classe 1 parce que ces deux sont en une seule balise button. J'essaie de briser le tex using-

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

Mais cela ne sera pas travaillé alors j'essaie this-

white-space: normal; 

après le retrait au-dessus des propriétés CSS et ai fait ma tâche.

L'espoir marchera pour tous !!!

Answer 7

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

travaille mine avec les deux