Überlappende Zeilen/Wordwrapping CSS

Ich möchte einen CSS-Effekt von markierten Wörtern in einem Text haben. Mein erster Versuch sah gut aus, bis ich eine Art von Wortumbruch hatte:Überlappende Zeilen/Wordwrapping CSS

<html><body> 
<p> aaa 
    <span style="background-color:#ff8080;border-radius:8px;padding-top:8px;padding-bottom:8px"> 
    bbb 
    <span style="background-color:#80ff80; border-radius:8px;padding-top:4px;padding-bottom:4px"> 
     ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc 
    </span> 
    ddd  
    <span style="background-color:#8080ff; border-radius:8px;padding-top:4px;padding-bottom:4px"> 
     eee 
    </span> 
    </span> 
    fff 
</p> 
</body></html>

Jede Idee, wie man die richtige Linienhöhe bekommen?

Vielen Dank für jeden Hinweis!

Quelle

2017-03-03 Christian

Haben Sie versucht, die css-Eigenschaft 'line-height' zu setzen? https://www.w3schools.com/cssref/pr_dim_line-height.asp – DavidVollmers

Sorry, ich habe vergessen zu sagen: Ja, ich habe versucht, Zeilenhöhe als Lösung. Aber manchmal habe ich mehr als zwei Schichten übereinander und suche nach einer allgemeinen Lösung. Mit jeder zusätzlichen Schicht benötige ich eine größere Zeilenhöhe. – Christian

Ich sehe was dein Problem ist. Ich schätze, die Layer werden programmgesteuert generiert, so dass Sie wissen sollten, wie hoch Sie die Zeilenhöhe berechnen müssen: 'line-height: (20 + numberOfLayers * 5) px' – DavidVollmers

So, nachdem das Problem mit dem Autor diskutieren die ich habe diese Idee für eine Abhilfe des Problems:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>Demo</title> 
 
</head> 
 

 
<body> 
 
<p> aaa 
 
    <span style="background-color:rgba(255, 0, 0, 0.2);border-radius:8px;padding: 0 4px;"> 
 
    bbb 
 
    <span style="background-color:rgba(0, 255, 0, 0.2); border-radius:8px;padding: 0 4px;"> 
 
     ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc 
 
    </span> 
 
    ddd  
 
    <span style="background-color:rgba(0, 0, 255, 0.2); border-radius:8px;padding: 0 4px;"> 
 
     eee 
 
    </span> 
 
    </span> 
 
    fff 
 
</p> 
 
</body> 
 

 
</html>

Sie Verwenden Sie transparente Farben, so brauchen Sie nicht die Top/Bot-Polsterung, die Ihr Problem ist.

Quelle

2017-03-03 15:28:44 DavidVollmers

Dies war mein allererster Versuch (nur ohne die Transparenz). Aber ich MÖCHTE die umliegenden Farben der umgebenden Markierungen oben und unten sehen. Aber was auch immer, ich werde die einfache Lösung (Zeilenhöhe: (20 + numberOfLayers * 5) px) verwenden, also werde ich deine Antwort als die richtige markieren. Vielen Dank! – Christian

ich Ihren Code in CSS getrennt: Sie einfach line-height: 50px;

.style1 { 
 
    line-height: 50px; 
 
    background-color:#ff8080; 
 
    border-radius:8px; 
 
    padding-top:8px; 
 
    padding-bottom:8px 
 
} 
 

 
.style2 { 
 
    line-height: 50px; 
 
    background-color:#80ff80; 
 
    border-radius:8px; 
 
    padding-top:4px; 
 
    padding-bottom:4px 
 
} 
 

 
.style3 { 
 
    line-height: 50px; 
 
    background-color:#8080ff; 
 
    border-radius:8px; 
 
    padding-top:4px; 
 
    padding-bottom:4px 
 
}

<p> aaa 
 
    <span class="style1"> 
 
    bbb 
 
    <span class="style2"> 
 
     ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc 
 
    </span> 
 
    ddd  
 
    <span class="style3"> 
 
     eee 
 
    </span> 
 
    </span> 
 
    fff 
 
</p>

Grüße

Quelle

2017-03-03 13:41:28

Erhöhen Sie die line-height in Ihrer Öffnung p-Tag, zum Beispiel wie

<p style="line-height: 200%;"> ....

verwenden können

(verschiedene Werte Versuchen Sie, um zu sehen, was am besten passt)

Quelle

2017-03-03 13:59:46 Johannes

Überlappende Zeilen/Wordwrapping CSS

Antwort

Verwandte Themen