Come avvolgere il testo del pulsante HTML con larghezza fissa?

197

Ho appena notato che se si assegna a un pulsante HTML una larghezza fissa, il testo all'interno del pulsante non viene mai racchiuso. L'ho provato con il ritorno a capo automatico, ma questo taglia la parola anche se ci sono spazi disponibili da avvolgere.

Come posso fare in modo che il testo di un pulsante HTML abbia una larghezza fissa, come farebbe qualsiasi 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>

Espandi frammento

Le classi CSS non fanno altro che aggiungere bordi e modificare il riempimento. Se aggiungo word-wrap:break-worda questo pulsante, lo avvolgerà così:

Roos Sturingen / Sen
sors

E non voglio che sia interrotto nel mezzo di una parola se è possibile interromperlo tra le parole.

— Peter
fonte

547

Ho scoperto che è possibile utilizzare la proprietà CSS dello spazio bianco:

white-space: normal;

E romperà le parole come testo normale.

— Siu
fonte

@MGOwen ora va bene - nel frattempo abbiamo attutito IE6.

— low_rents,

1

Le altre risposte suggeriscono che word-wrap: break-word;non ha funzionato per me, ma questo ha funzionato.

— F1Krazy,

15

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

Il mio funziona con entrambi

— Richard
fonte

8

Puoi forzarlo (browser permettendo, immagino) inserendo le interruzioni di riga nel sorgente HTML, in questo modo:

<INPUT value="Line 1
Line 2">

Ovviamente capire dove posizionare le interruzioni di linea non è necessariamente banale ...

Se puoi usare un HTML <BUTTON>invece di un <INPUT>, in modo tale che l'etichetta del pulsante sia il contenuto dell'elemento anziché il suo valueattributo, posizionare quel contenuto all'interno di un <SPAN>con un widthattributo che è qualche pixel più stretto di quello del pulsante sembra fare il trucco (anche in IE6 :-).

— Brian Nixon
fonte

1

Per qualcosa di molto semplice puoi anche usare <button> con una <br> nel punto di interruzione desiderato.

— KevinH,

Utilizzato per funzionare, ma non funziona più nelle ultime versioni di Chrome.

— Joe Mabel,

6

Ho scoperto che un pulsante funziona, ma che vorrai aggiungere style="height: 100%;"al pulsante in modo che mostrerà più della prima riga su Safari per iPhone iOS 5.1.1

— Nick Saemenes
fonte

3

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

"Entrambi" ha funzionato per me.

— Bhavani Raju
fonte

2

Pulsanti multilinea del genere non sono davvero banali da implementare. Questa pagina ha un'interessante discussione (anche se un po 'datata) sull'argomento. La tua scommessa migliore sarebbe probabilmente quella di eliminare il requisito multi-linea o di creare un pulsante personalizzato utilizzando ad es div. Se CSS e aggiungere un po 'di JavaScript per farlo funzionare come pulsante.

— Daan
fonte

Il problema è che sto usando ASP.Net, usando il controllo asp: button con gli attributi CommandName e CommandArgument. Non posso semplicemente usare un altro controllo.

— Peter,

2

Se abbiamo alcune divisioni interne all'interno del <button>tag come questo-

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

A volte il testo della classe A si sovrappone ai dati della classe 1 perché entrambi si trovano in un tag a pulsante singolo. Provo a rompere il tex usando-

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

Ma questo non funzionerà, quindi provo questo-

white-space: normal;

dopo aver rimosso le proprietà CSS sopra e fatto il mio compito.

La speranza funzionerà per tutti !!!

— S.Yadav
fonte

1

In che modo differisce da questa risposta?

— Christian Gollhardt,

È, se noti, l'ho usato con il tag pulsante.

— S.Yadav,

I div non sono ammessi all'interno di un pulsante, non è HTML corretto.

— Ian Devlin,

1

word-wrap: break-word;

ha funzionato per me.

— Juubes
fonte