Bordo CSS alla fine della riga su elementi in linea

Question

Il comportamento predefinito degli elementi HTML inline con un bordo è che, alla fine e all'inizio di una riga in un interruzione di riga, non viene disegnato alcun bordo. Come

span { 
    border: 1px solid black; 
} 

Vedere risultato a: http://jsfiddle.net/yuszuv/ft7waga3/1/

Esiste un modo per attirare i "dispersi" confini, in modo che ogni linea sembra essere contenuta in una scatola?

Answer 1

Ho paura che non è possibile rendere ogni riga contenuta in un rettangolo utilizzando border su un elemento display:inline.
Tuttavia, una soluzione alternativa è utilizzare un box-shadow.

span { 
    line-height: 32px; 
    box-shadow: 0 0 0 1px black; 
} 

jsfiddle

seguito una schermata da FireFox:

---

Come detto Jan, un approccio migliore consiste nell'utilizzare box-decoration-break

Secondo canIuse, questo dovrebbe funzionare per tutti i browser più recenti, ad eccezione di IE:

span { 
    border: 1px solid black; 
    -webkit-box-decoration-break: clone; 
    box-decoration-break: clone; 
} 

updated jsFiddle