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


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 du papier, mais cela coupe le mot même s'il y a des espaces disponibles pour l'enrouler.

Comment puis-je créer le texte d'un bouton html avec une largeur fixe comme n'importe quelle pile de table?

<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 ajouter 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 le couper au milieu d'un mot s'il est possible de le couper entre les mots.

Merci


155
2018-05-14 07:28


origine


Réponses:


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

white-space: normal;

Et cela va casser les mots en texte normal.

J'espère que cela aide.


403
2018-04-04 14:36



Vous pouvez le forcer (si le navigateur le permet, j'imagine) en insérant des sauts de ligne dans le source HTML, comme ceci:

<INPUT value="Line 1
Line 2">

Bien sûr, travailler où placer les sauts de ligne n'est pas forcément trivial ...

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


8
2017-07-11 21:15



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


6
2017-08-18 00:17



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

Le mien travaille avec les deux


4
2018-02-22 09:32



Si nous avons des divisions intérieures à l'intérieur <button> tag comme ça-

<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 chevauchent sur les données de classe 1 car elles sont toutes les deux dans un seul 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 marchera pas alors j'essaie ça-

white-space: normal;

après avoir enlevé les propriétés css et obtenu ma tâche.

L'espoir fonctionnera pour tous !!!


2
2018-05-14 08:22



Les boutons multi-lignes comme ceux-là 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 soit de laisser tomber l'exigence multi-lignes, soit de créer un bouton personnalisé, par ex. divs et CSS, et en ajoutant du JavaScript pour le faire fonctionner comme un bouton.


1
2017-11-26 19:34



word-wrap: break-word;

travaillé pour moi.


1
2018-04-17 08:12



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

"Les deux" a fonctionné pour moi.


1