CSS-Stil um eine Spanne zu skizzieren

Question

Ich versuche, ein Text-Highlight zu stylen, aber die CSS, um es zu tun, entgeht mir völlig. Hier ist ein Beispiel des HTML:

This is a long <span class="selection">piece of text, whose sole purpose is being long enough to wrap over several lines,</span> so I can illustrate my problem. 

Und die CSS:

.selection { 
    background: lightblue; 
    padding-left: 3px; 
    padding-right: 3px; 
    border: solid blue thin;  
} 

Was ich hoffe, zu erreichen, ist ein Entwurf für den Bereich der Spanne bedeckt, wie folgt aus:

Aber stattdessen wird die Grenze in-zwischen den Zeilen repliziert:

Dann werde ich dachte ich nur Entfernen Sie die border von meinem CSS, das würde mir dies:

Aber in Wirklichkeit ist es nur so seltsam aussieht:

ich konzeptionell verstehen, was los ist; Der Bereich enthält nur den Text, nicht den Zeilenabstand. Meine CSS-Fähigkeiten gehen nicht viel weiter als das oben erwähnte Snippet, aber gibt es wirklich keine Möglichkeit, diese Grenzlinien dazwischen loszuwerden?

Answer 1

Verwendung outline stattdessen verwenden sollten border um das gewünschte Aussehen zu erreichen & fühlen. [ich die Schnipsel aus Hitmands Antwort nahm und änderte es ein wenig]

.text-highlighted { 
 
    background: cyan; 
 
    outline: 1px solid blue; 
 
    padding: .2em .4em; 
 
} 
 

 
.entry { max-width: 200px; padding: .5em; }

<div class="entry">This is a long <mark class="text-highlighted">piece of text, whose sole purpose is being long enough to wrap over several lines,</mark> so I can illustrate my problem.</div>

Answer 2

Sie richtigen Markup verwenden sollten ... Spanne ist ein allgemeiner Inline-Tag, aber für Text markieren Sie Zeichenhttps://developer.mozilla.org/en/docs/Web/HTML/Element/mark

.text-highlighted { 
 
    background: cyan; 
 
    outline: 1px solid blue; 
 
    padding: .2em .4em; 
 
} 
 

 
.entry { max-width: 200px; padding: .5em; }

<div class="entry">This is a long <mark class="text-highlighted">piece of text, whose sole purpose is being long enough to wrap over several lines,</mark> so I can illustrate my problem.</div>