Comment inclure le remplissage sur un élément span ayant plusieurs lignes

Question

jsfiddle here.

J'ai un élément span qui est surligné en utilisant background-color: yellow et padding: 1px 10px.

Cependant, sur les petits appareils, cette ligne de texte devient deux lignes, trois lignes, etc. Cela provoque les première et deuxième lignes à « perdre » le rembourrage sur le côté droit , tels que les mots « le » et « à », et les deuxième et troisième lignes à « perdre » le rembourrage sur la gauche côté, comme les mots « fort » et « mieux » dans l'image ci-dessous:

Comment puis-je assurer ces mots (dans l'image ci-dessus, "le", "surligner", "à", "mieux") et tous les autres mots garder ce remplissage 10px sur le côté gauche et à droite?

Quelqu'un en réponse à une question similaire a suggéré d'utiliser display: block, mais cela rend la durée plus une durée, juste un rectangle et qui est pas comment je besoin de regarder. Cela permet également de faire ressortir toute la largeur de la page.

Answer 1

Vous pouvez feindre l'arrière-plan lorsque la durée est brisée à l'aide box-shadow. Essayez quelque chose comme ça et voir si cela fonctionne pour vous:

span { 
    background-color: yellow; 
    padding: 1px 0; 
    box-shadow: 10px 0 0 0 yellow, -10px 0 0 0 yellow; 
} 

Answer 2

simplement envelopper dans un conteneur div et mettre le rembourrage horizontal sur cet élément puisque c'est ce que vous voulez réellement:

<div class="span-container><span>my text</span></div> 

.span-container { padding: 0 10px; } 
.span-container span { background-color: yellow; padding: 1px 0; } 

est ici une violon démontrant que cette mesure permet exactement ce que vous voulez sans contournements de travail qui ne fonctionnent pas dans tous les navigateurs: https://jsfiddle.net/xg1bkgmn/

durée est un élément en ligne, il est logique de l'utiliser pour votre cas de mettre en évidence que le texte et l'élargissement des lignes . Cependant, pour garder le tout rembourré, il faut un conteneur d'éléments de bloc, c'est une pratique standard. Pourquoi choisir un CSS plus compliqué quand la solution est aussi simple?

Answer 3

Utilisez le CSS box-decoration-break.

span { 
    background-color:yellow; 
    padding:1px 10px; 
    box-decoration-break: clone; 
    -webkit-box-decoration-break:clone; 
} 

Cela applique les styles à chaque fragment de boîte de votre étendue.

Answer 4

Pour inclure autant de navigateurs que possible, vous pouvez relayer sur la position: relative et utiliser 2 balises inline imbriquées pour imiter le résultat souhaité.

Notez que certaines marges ou padding doivent être pris en compte pour conserver l'élément translaté en position.

exemple pour montrer l'idée

p {/* make the text wrap*/ 
 
    width:15em; 
 
    margin:2em; 
 
} 
 
span { 
 
background:yellow; 
 
/* increase line height for better reading : optionnal*/ 
 
    line-height:1.35em; 
 
    padding: 0.25em 0; 
 
    
 
} 
 
span span { 
 
/* move child 1em to left to fake padding */ 
 
    position:relative; 
 
    left:1em;/* value of your left alike padding*/ 
 
} 
 

 
/* eventually on the last line ? */ 
 

 
span span:after { 
 
    content:''; 
 
    padding:0.25em; 
 
}

<p> 
 
    <span> 
 
<span>This sentence <del> has some padding</del> to make the highlight appear thicker. These are more words to better explain. 
 
</span> 
 
    </span> 
 
</p>

https://jsfiddle.net/ynh35sL5/3/

Ce n'est pas le meilleur, HTML supplémentaire pour le style ... envergures sont neutres :(