CSS/Javascript: Jak narysować minimalną obwódkę wokół elementu śródliniowego?

Question

Rozważmy następujący HTML:

<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> 

chciałbym zwrócić minimalną granicę wokół rozpiętości.

to znaczy:

• Jeśli zakres jest wykonane na jednej linii, granica jest równoważne ustawieniu stylu CSS granicy: 1 piksel wypełnione;
• Jeśli rozpiętość jest renderowana na wielu liniach, ramka jest narysowana wokół najbardziej oddalonych krawędzi przęsła, a nie między przecinanymi liniami. Jest to równoważne ustawieniu koloru tła CSS na przęśle i narysowaniu linii wokół krawędzi podświetlonego obszaru.

Jestem przekonany, że nie da się tego zrobić przy pomocy samego CSS (w drugim przypadku). Rozwiązania obejmujące biblioteki javascript lub te, które są specyficzne dla przeglądarki Firefox, są dopuszczalne.

Jest to mock-up jak drugi scenariusz powinien wyglądać:

Answer 1

Warto dodać obrys, nie graniczą http://jsfiddle.net/tarabyte/z9THQ/

span { 
    outline: 2px solid black; 
} 

Firefox rysuje kontury między liniami. Jest 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> 

i CSS:

.wrapped { 
    outline: 2px solid black; 
} 

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