Come avvolgere il testo del pulsante html con larghezza fissa

Ho appena notato che se assegni a un pulsante html una larghezza fissa, il testo all’interno del pulsante non viene mai spostato. L’ho provato con il word-wrap, ma i tagli della parola anche se ci sono degli spazi disponibili per l’avvolgimento.

Come posso rendere il testo di un pulsante html con un avvolgimento a larghezza fissa come farebbe un qualsiasi tablecell?

   

le classi css non fanno altro che aggiungere bordi e modificare il padding. Se aggiungo word-wrap: break-word a questo pulsante, lo avvolgerà in questo modo:

 Roos Sturingen / Sen sors 

E non voglio che sia tagliato nel mezzo di una parola se è ansible tagliarlo tra le parole.

Grazie

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

 white-space: normal; 

E romperà le parole come testo normale.

Spero che sia d’aiuto.

Puoi forzarlo (il browser lo consente, immagino) inserendo interruzioni di riga nel codice sorgente HTML, come questo:

  

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

Se è ansible utilizzare un HTML invece di un , in modo che l’etichetta del pulsante sia il contenuto dell’elemento anziché l’attributo value , posizionando tale contenuto all’interno di con un attributo width che presenta alcuni pixel più ristretti di quello del pulsante sembra fare il trucco (anche in IE6 :-).

Ho trovato che un pulsante funziona, ma che ti consigliamo di aggiungere style="height: 100%;" al pulsante in modo che mostri più della prima riga su Safari per iPhone iOS 5.1.1

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

Il mio funziona con entrambi

Se abbiamo alcune divisioni interne all’interno del tag come questo-

  

A volte il testo di class A si sovrappone ai dati di class 1 perché entrambi si trovano in un singolo pulsante. 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 ha funzionato, quindi ci provo-

 white-space: normal; 

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

La speranza funzionerà per tutti !!!

I pulsanti multi-linea come quello non sono davvero banali da implementare. Questa pagina ha una discussione interessante (anche se un po ‘datata) sull’argomento. La soluzione migliore sarebbe probabilmente quella di abbandonare il requisito multi-line o di creare un pulsante personalizzato utilizzando ad esempio div s e CSS e aggiungendo qualche JavaScript per farlo funzionare come un pulsante.

 word-wrap: break-word; 

ha funzionato per me

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

“Entrambi” ha funzionato per me.