Đường viền CSS ở cuối dòng trên các phần tử nội tuyến

Question

Hành vi mặc định của các phần tử HTML nội tuyến có đường viền là ở cuối và đầu dòng tại dấu ngắt dòng, không có đường viền. Giống như

span { 
    border: 1px solid black; 
} 

xem kết quả tại địa chỉ: http://jsfiddle.net/yuszuv/ft7waga3/1/

Có cách nào để vẽ "mất tích" biên giới, do đó mỗi dòng dường như được chứa trong một hộp?

Answer 1

Tôi sợ bạn không thể tạo mỗi dòng trong hình chữ nhật bằng cách sử dụng border trên phần tử display:inline.
Tuy nhiên, cách giải quyết khác là sử dụng box-shadow thay thế.

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

jsfiddle

Dưới đây là một ảnh chụp màn hình từ FireFox:

---

khi Jan cho biết, một cách tiếp cận tốt hơn là sử dụng box-decoration-break

Theo canIuse, điều này sẽ làm việc cho tất cả các trình duyệt mới nhất, ngoại trừ IE:

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

updated jsFiddle