Espace insécable en html

Photo de profile de Cédric Chevillard

Besoin d’un conseil pour votre site internet ?

Expert Elementor

En tant qu'expert en Elementor, je propose mon aide pour optimiser la conception, la personnalisation et la performance de votre site web avec ce plugin.

Aujourd’hui, nous allons explorer un sujet simple mais crucial en HTML : l’espace insécable.

Que vous soyez débutant ou expert, comprendre comment utiliser les espaces insécables peut considérablement améliorer la lisibilité de vos textes lors de la création d’un site internet.

Si vous souhaitez gagner du temps et ajouter automatiquement des espaces insécables dans votre texte, voici mon générateur :





Paragraphe formaté avec espaces insécables (il suffit de copier le résultat et le mettre dans du HTML) :

Qu’est-ce qu’un espace insécable ?

Un espace insécable, comme son nom l’indique, est un espace qui empêche la séparation de deux mots à la fin d’une ligne.

Cela signifie que ces mots resteront toujours ensemble, même si cela signifie aller à la ligne suivante.

C’est particulièrement utile pour les abréviations, les unités de mesure et d’autres éléments mais nous verrons ça plus tard dans l’article.

En HTML, un espace insécable se crée avec l’entité :  

Cette entité est reconnue par tous les navigateurs et permet de garantir que le texte reste cohérent et facile à lire.

L’utilité d’un espace insécable

L’espace insécable est essentiel pour maintenir la cohérence visuelle et sémantique de votre texte.

Par exemple, vous ne voudriez pas qu’une abréviation comme « Dr. » soit coupée en deux à la fin d’une ligne, laissant « Dr. » d’un côté et le nom du docteur de l’autre.

Voici comment utiliser un espace insécable dans votre code HTML :

  • Exemple sans espace insécable
	
	<p>Le Dr. Smith est un expert en la matière.</p>

Dans cet exemple, « Dr. » et « Smith » peuvent se retrouver séparés à la fin d’une ligne, ce qui peut nuire à la lisibilité.

  • Exemple avec espace insécable
	
	<p>Le Dr.&nbsp;Smith est un expert en la matière.</p>

En utilisant &nbsp;, nous garantissons que « Dr. » et « Smith » resteront ensemble, peu importe où le navigateur décide de couper la ligne.

Exemples de cas, où l’espace insécable est intéressant

  • Les unités de mesure :
	
	<p>La pièce mesure 20&nbsp;mètres de long.</p>

Dans ce cas, nous voulons que le nombre « 20 » et l’unité « mètres » restent ensemble pour éviter toute confusion.

  • Les dates :
	
	<p>Le projet doit être terminé avant le 5&nbsp;juin.</p>

Il est important de garder la date entière sur la même ligne pour une meilleure lisibilité.

  • Les abréviations :
	
	<p>Dr.&nbsp;Jones a publié un nouvel article.</p>

Les abréviations suivies d’un nom propre doivent rester ensemble pour des raisons évidentes de clarté.

  • Les chiffres :
	
	<p>Le prix est de 1&nbsp;000&nbsp;€.</p>

Ici, nous voulons que le montant et la devise restent ensemble pour éviter tout malentendu.

Utiliser l’espace insécable à travers WordPress

Éditeur standard

Pour insérer un espace insécable dans l’éditeur classique de WordPress, passez en mode texte et utilisez &nbsp; là où vous avez besoin de cet espace.

Cela peut sembler un peu technique, mais c’est une méthode très efficace pour garantir que votre contenu reste bien formaté.

Gutenberg

Dans l’éditeur Gutenberg, vous pouvez utiliser le bloc HTML personnalisé pour insérer manuellement un espace insécable. Il suffit de sélectionner le bloc HTML, puis d’ajouter &nbsp; là où vous en avez besoin.

Gutenberg offre une interface visuelle qui rend cette tâche relativement simple.

Alternatives au HTML pour les espaces insécables

Bien que &nbsp; soit la méthode la plus courante pour créer des espaces insécables en HTML, il existe d’autres moyens dans différents langages de programmation et éditeurs de texte :

En CSS

Vous pouvez utiliser white-space: nowrap; pour empêcher la coupure de texte dans certains contextes.

Par exemple :

	
	.noscillables {
    	white-space: nowrap;
	}

Ensuite, appliquez cette classe à l’élément HTML concerné :

	
	<span class="noscillables">Le Dr. Smith</span>

En JavaScript

En JavaScript, vous pouvez remplacer automatiquement les espaces par des espaces insécables. Voici un exemple de code :

	
	let text = "Le Dr. Smith est un expert.";
    text = text.replace(/ /g, '&nbsp;');
    console.log(text); // Affiche "Le&nbsp;Dr.&nbsp;Smith&nbsp;est&nbsp;un&nbsp;expert."

Ce script remplace tous les espaces par des espaces insécables.

En PHP

En PHP, vous pouvez créer une fonction pour automatiser cette insertion. Voici un exemple :

	
	function inserer_espaces_insecables($texte) {
        return str_replace(' ', '&nbsp;', $texte);
    }

    $texte = "Le Dr. Smith est un expert.";
    echo inserer_espaces_insecables($texte); // Affiche "Le&nbsp;Dr.&nbsp;Smith&nbsp;est&nbsp;un&nbsp;expert."

Voilà, vous savez maintenant comment utiliser les espaces insécables en HTML, ainsi que d’autres méthodes pour assurer que votre texte reste lisible et cohérent.

J’espère que cet article vous a été utile. N’hésitez pas à expérimenter et à intégrer ces pratiques dans vos projets !

Mes autres articles

Explorée actuellement non indexée

Vous êtes probablement ici parce que vous avez rencontré le message « Explorée actuellement non indexée » dans votre Google Search Console, et vous vous...

Page d'accueil de la documentation de l'API Resabooking afin de s'y connecter

Intégrer Resabooking dans votre site WordPress

Si vous gérez un camping et souhaitez améliorer votre site internet, l’intégration de Resabooking dans votre site WordPress est une solution idéale. En tant que...

Infographie de l'article "Fil d'Arianne WordPress"

Fil d’Ariane WordPress

Vous vous êtes sûrement demandé comment ajouter un fil d’Ariane sur votre site WordPress, n’est-ce pas ? Je vais vous guider pas à pas pour...