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
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.
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: -).
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
white-space: normal;
word-wrap: break-word;
Le mien fonctionne avec les deux
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 !!!
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.
white-space: normal;
word-wrap: break-word;
"Les deux" ont fonctionné pour moi.