CSS/Javascript: Làm cách nào để vẽ đường viền tối thiểu xung quanh yếu tố nội tuyến?

Question

Hãy xem xét đoạn HTML sau:

<p>This is a potentially large paragraph of text, which <span>may get 
wrapped onto several lines when displayed in the browser. 
I would like to be able to draw a minimal</span> box round the span</p> 

Tôi muốn vẽ một biên giới tối thiểu vòng span.

Đó là:

• Nếu nhịp được render trên một dòng đơn, biên giới là tương đương với đặt một kiểu CSS của border: 1px solid đen;
• Nếu khoảng được hiển thị trên nhiều dòng, đường viền được vẽ xung quanh các cạnh ngoài cùng của khoảng, không phải giữa các đường mà nó đi qua. Điều này tương đương với việc thiết lập màu nền CSS trên span và vẽ đường xung quanh các cạnh của khu vực được đánh dấu.

Tôi khá tự tin rằng điều này không thể thực hiện được chỉ với CSS thô (trong trường hợp thứ hai). Các giải pháp liên quan đến thư viện javascript hoặc các thư viện dành riêng cho Firefox, đều được chấp nhận.

Đây là một bản mock-up của kịch bản thứ hai nên xem xét như thế nào:

Answer 1

Hãy xem xét thêm một phác thảo, không biên giới http://jsfiddle.net/tarabyte/z9THQ/

span { 
    outline: 2px solid black; 
} 

Firefox vẽ phác thảo giữa các dòng. Có một workarond: http://jsfiddle.net/z9THQ/2/

HTML:

<p> 
    This is a potentially large paragraph of text, which 
     <span class="wrapped"><span> 
     may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal 
     </span></span> 
    box round the span 
</p> 

Và CSS:

.wrapped { 
    outline: 2px solid black; 
} 

.wrapped span { 
    border: 1px solid white; 
    background-color: white; 
    position: relative; 
    z-index: 1000; 
}