인라인 요소에서 줄의 끝에서 CSS 테두리

Question

테두리가있는 인라인 HTML 요소의 기본 동작은 줄 바꿈시 끝에있는 줄의 시작과 끝 부분에 테두리가 표시되지 않는다는 것입니다. 각 라인은 상자에 포함 된 것으로 보인다 있도록 http://jsfiddle.net/yuszuv/ft7waga3/1/

는 "실종"국경을 그릴 수있는 방법이 있나요 :

span { 
    border: 1px solid black; 
} 

같이에서 결과를 참조하십시오?

Answer 1

display:inline 요소에 border을 사용하여 각 줄을 직사각형으로 만들 수 없습니까?
하지만 해결 방법은 box-shadow 대신 사용하는 것입니다. 파이어 폭스에서 스크린 샷 아래

jsfiddle

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

: 얀 더 나은 방법은 사용하는 것입니다, 말했듯이

---

box-decoration-break

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

updated jsFiddle