Introduire un groupe de mots insécable dans un article
Pexels
Par défaut, la largeur de l'écran conditionne les sauts de ligne. Alors, comment conserver plusieurs mots se suivant sur une même ligne ?
⚠️ Cette astuce concerne tout texte d'un site composé en HTML.
Il te faut un accès au source de ton contenu sur l'éditeur de ton CMS.
Ce n'est donc pas valable, par exemple, pour tes posts sur ton réseau social préféré.
1️⃣ Mettons que tu aies le paragraphe suivant :
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2️⃣ En affichant le code source de ta page, tu obtiens ceci :
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Le texte est alors entouré des balises HTML <p> et </p> désignant le début et la fin du paragraphe.
3️⃣ Plusieurs mots ayant les mêmes propriétés peuvent être rassemblés avec les balises <span> et </span>,
ce qui donne quelque chose comme ça :
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span>sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua. </p>
A ce stade, rien ne change car les balises <span> n'ont d'autre effet que d'assembler les mots qu'elles délimitent.
⚠️ Ceci doit-être ajouté dans le code source et non directement dans le texte saisi avec l'éditeur.
4️⃣ Il faut ensuite leur donner la propriété d'insécalabilité en apposant l'attribut style sur la balise de tête :
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span style="white-space:nowrap">sed do eiusmod tempor</span> incididunt ut labore et dolore magna aliqua.</p>
Ce qui donne :
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Si tu réduis la largeur en déplaçant la poignée en bas à droite, tu pourras constater que le texte "sed do eiusmod tempor" signalé en rouge est placé sur la ligne du dessous en un seul bloc.
La propriété white-space est utilisée pour décrire la façon dont les blancs sont gérés au sein de l'élément. Pour de plus amples informations, je te conseilles de visiter la page MDN Web Docs.
Ce sera tout pour cette fois-ci.
🙏Merci pour ton attention, tes partages
et ton soutien 👉👉👇.
Soutiens le projet