J'ai compris ce que tu essaies de faire. Lorsque le texte est contraint d'aller à la ligne, tu souhaites qu'il y ait le même alignement en début de ligne et à la fin un visuel non disgracieux. Il faut qu'il y ait un wrap sur chaque mot. Ce qui veut dire que pour certains mots/entités, tu seras obligé de respecter les règles de typographie en ajoutant une espace insécable avant et/ou après.
exemple :
<p>Fait il beau aujourd'hui ? Oui, il fait beau</p>
En css pur, je ne vois pas de solution. En effet, tu es obligé de travailler sur chaque mot.
La seule solution que je vois, c'est celle-là (obligé que le js vienne nous aider pour automatiser ce rendu):
<div class="simulation-responsive">
<h2><mark>Sécurité, confidentialité, Règlement général sur la protection des données RGPD) / 11</mark></h2>
</div>
scss
.simulation-responsive{
max-width: 400px;
}
h2{
display: flex;
flex-wrap:wrap;
span, mark{
background-color: red;
color:white;
padding: 0.2em .4em;
}
}
js :
let $h2 = document.querySelector('h2')
$h2.innerHTML = $h2.textContent.split(' ').map(w => `<span>${w}</span>`).join('')
Comme nous le constatons tous les deux, c'est beurk. Mais le résultat est assez convaincant. À noter que tu ne peux pas trop jouer sur le padding-left et padding-right.
Modifié par niuxe (09 Aug 2023 - 19:46)