Mandare a capo il testo nel value di un bottone input

[marcom149]

Buongiorno a tutti.
Sto cercando di gestire pulsanti quadrati dove la scritta dovrebbe andare a capo.
Ma non ci va.
Ho costruito i pulsanti così:

CSS:

.square {
    position: relative;
    display: inline-block;
}

#sqr1{
    color: #ffffff;
    background: var(--main-color);
    font-size: 16px;
    text-align:center;
    width: 100px;
    height: 100px;
    padding: 7px;
 }

HTML:

<div class="square">
          <form accept-charset=utf-8 action="tomenu.php" padding="0">  
          <input id="sqr1" type="submit" name="" value="Nuovo Ordine" >
          </form>  
</div>

RISULTATO:
puls.jpg

Come vedete non funziona neanche l'align....
Come posso risolvere?
Grazie a tutti
Marco

[carlomarangoni]

Tra nuovo e ordine devi mettere

& #10;

senza lo spazio tra & e #

[marcom149]

Grazie mille, funziona!
Ha solo questa controindicazione: i pulsanti che non vannoa capo sono più in basso.... (vedi foto)

puls1.png

[carlomarangoni]

Prova un <br> dopo ogni pulsante

[marcom149]

li voglio sulla stessa riga.
Ma come vedi il terzo ed il quarto (che non hanno la scritta che va a capo) sono appena più in basso.

[KillerWorm]

Ciao aggiungi vertical-align:top; a tutti i tuoi pulsanti o all'elemento che li contiene (potresti applicarlo alla classe .square).


Occhio qui:

<form accept-charset=utf-8 action="tomenu.php" padding="0">

quel padding non è un attributo valido, non ci sta a fare niente lì.



[Mod]
Occhio a quando posti del codice sul forum, utilizza sempre gli opportuni tag [CODE] ... [/CODE] (vedi regolamento di sezione).

Occhio anche ai titoli. Titoli generici come in questo caso ("Non va a capo"), portano alla chiusura immediata della discussione (vedi regolamento di sezione).

Per stavolta ho corretto io ma fai attenzione in futuro. Grazie.