responsive Texthervorhebung für jede Zeile eines Textes innerhalb einer Spanne

Question

, wie Sie in der Verbindung here sehen können. Ich markierte den dunkelgrauen Text (unter 'Roots Profil' Titel) mit einem hellgrauen Hintergrund. Der PHP-Code sieht wie folgt aus:

<div class="hp_subtitle" id="rb_sub1"> 
    <span class="spank"> 
     <?php the_field("rp_subtitle"); ?> 
    </span> 
</div> 

Der Text von einem ACF kommt und beliebig lang sein können. was ich will ist, dass für jede Zeile ein 10px für Padding-links und Padding-rechts, unabhängig von der Anzahl der Zeilen. Das, weil ich will, dass meine Website reagiert und die Größe des Bildschirms offensichtlich die Anzahl der Zeilen beeinflusst, die dieser Text haben wird. gerade funktioniert das Padding natürlich nur an der ersten linken und letzten rechten, da es als eine Zeile besucht wird. Gibt es eine Möglichkeit, die Zeile mit Jquery oder JS auszuwählen? So kann es die Attribute dynamisch hinzufügen, nachdem die Zeile wegen der Bildschirmgröße bricht? That's only two rows, but that's how i want it to look

Answer 1

.spank { 
    background: #d7d7d7; 
    line-height: 1.8; 
    position: relative; 
    top: -7px; 
    left: -10px; 
    padding: 0 10px; 
    -webkit-box-decoration-break: clone; 
    box-decoration-break: clone; 
}