Granica CSS na końcu linii na elementach śródliniowych

Question

Domyślnym zachowaniem wbudowanych elementów HTML z obramowaniem jest to, że na końcu i na początku linii w momencie rozbicia linii nie zostanie narysowana żadna granica. Jak

span { 
    border: 1px solid black; 
} 

Zobacz Wynik: http://jsfiddle.net/yuszuv/ft7waga3/1/

Czy istnieje jakiś sposób, aby wyciągnąć „brakujących” granice, tak, że każda linia wydaje się być zawarty w pudełku?

Answer 1

Obawiam się, że nie można wykonać każdej linii zawartej w prostokącie przy użyciu border na elemencie display:inline.
Jednak rozwiązaniem alternatywnym jest użycie numeru box-shadow.

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

jsfiddle

Poniżej zrzut ekranu z Firefox:

---

Jak powiedział Jan, lepszym rozwiązaniem jest użycie box-decoration-break

Według canIuse, to powinno działać na wszystkich najnowszych przeglądarkach z wyjątkiem IE:

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

updated jsFiddle