Comment éviter les renvois à la ligne avec CSS

Introduction

De manière générale, les développeurs préfèrent utiliser le renvoi à la ligne pour mettre en page un texte sur une page Web. Le renvoi à la ligne permet d’imposer une certaine contrainte sur le texte et de ne pas avoir à faire face à des problèmes de conception. Le renvoi à la ligne permet aussi de ne pas obliger l’utilisateur à faire défiler le texte horizontalement pour pouvoir le lire. Mais il se peut que, parfois, vous souhaitiez que le texte reste sur une seule et même ligne, peu importe sa longueur. Pour empêcher les renvois à la ligne et l’habillage de texte de certains éléments, vous pouvez utiliser la propriété white-space de CSS.

Au cours de ce tutoriel, vous allez mettre en forme le même bloc de texte de 4 manières différentes. Avec la première, vous utiliserez des renvois de lignes, puis avec les trois autres, vous le ferez sans renvoi à la ligne :

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Voilà, nous disposons maintenant de plusieurs possibilités de mettre en forme notre texte avec ou sans renvoi à la ligne.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin de :

• Un éditeur de code de votre choix, comme nano ou Visual Studio Code
• Un navigateur web
• De bonnes connaissances de base sur HTML. Vous pouvez consulter notre introduction dédiée à ce sujet avec notre série de tutoriels Comment créer un site web avec HTML.

Étape 1 — Empêcher et forcer les renvois à la ligne dans CSS

Au cours de cette étape, vous allez créer une feuille de style avec 3 catégories différentes. Chacune traitera les renvois à la ligne de manière différente : avec la première, le texte sera coupé par défaut. Avec la seconde et la troisième, vous forcerez le texte à ne pas créer de nouvelle ligne et de renvoi à la ligne.

Tout d’abord, créez et ouvrez un nouveau fichier que vous appellerez main.css en utilisant nano ou l’éditeur de votre choix :

nano main.css

Ajoutez le contenu suivant. Il permettra d’introduire 3 catégories de CSS en utilisant plusieurs propriétés, notamment white-space :

.sammy-wrap {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
}
.sammy-nowrap-1 {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
    white-space: nowrap;
}
.sammy-nowrap-2 {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Votre première catégorie se nomme .sammy-wrap. Elle permet de configurer six des propriétés les plus courantes en CSS, notamment border-radius, background-color, border max-width, padding et margin-bottom. Cette catégorie créera une boîte visuelle, mais elle ne vous permettra pas de configurer des propriétés spécifiques de renvois à la ligne. Cela signifie que les renvois à la ligne se feront par défaut.

Votre deuxième catégorie se nomme .sammy-nowrap-1. Elle permet de configurer la même boîte que celle de .sammy-wrap, mais, ici, vous ajoutez une autre propriété : white-space. La propriété white-space intègre de nombreuses options, qui permettent toutes de configurer la manière dont le white space est traité dans un élément donné. Ici, vous avez configuré white-space sur nowrap, ce qui empêchera tout renvoi à la ligne.

Votre troisième catégorie est .sammy-nowrap-2. Elle permet d’ajouter un white-space et deux propriétés supplémentaires : overflow et text-overflow. La propriété overflow gère le scrollable overflow, c’est-à-dire lorsque le contenu d’un élément va au-delà des bords de l’élément en question. La propriété overflow permet de pouvoir faire défiler le texte, de le rendre visible ou de le cacher. Configurez overflow sur hidden. Ensuite, utilisez la propriété text-overflow pour personnaliser votre texte encore plus. text-overflow vous permet également de signaler la présence de texte additionnel caché à l’utilisateur. Étant donné que vous l’avez configuré sur ellipsis, vous n’aurez plus de renvoi à la ligne ou de texte en dehors de la boîte. CSS cachera le texte qui dépasse et signalera la présence de contenu caché par des ...

Enregistrez et fermez votre fichier.

Maintenant que vous disposez d’une feuille de style, vous êtes prêt à créer un court fichier HTML en utilisant un texte qui vous servira d’exemple. Ensuite, vous chargerez la page Web dans un navigateur pour voir de quelle manière CSS peut empêcher les renvois à la ligne.

Étape 2 — Créer le fichier HTML

Une fois que vous avez configuré vos catégories CSS, vous pouvez les appliquer au texte qui vous sert d’exemple.

Créez un fichier que vous appellerez index.html et ouvrez-le dans l’éditeur de votre choix. Veillez à bien le placer dans le même dossier que main.css :

nano index.html

Ajoutez le contenu suivant, qui associera à la fois main.css à votre stylesheet, puis appliquera les catégories à un bloc de texte échantillon :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>How To Prevent Line Breaks with CSS</title>
<link href="main.css" rel="stylesheet">
</head>

<body>
<p class="sammy-wrap"    > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-wrap"    > Medusafish&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;danio.</p>
</body>
</html>

Vous venez d’attribuer votre style d’habillage standard au premier bloc de texte, votre style nowrap au deuxième, et nowrap qui est hidden avec ellipsis au troisième. Vous avez attribué sammy-wrap au quatrième échantillon. Mais, en insérant directement des espaces insécables ( ) dans le HTML, vous écrasez l’habillage par défaut. Si, vous devez exceptionnellement empêcher les renvois à la ligne, vous pouvez utiliser des espaces insécables pour le faire rapidement.

Ouvrez index.html dans un navigateur Web pour voir votre résultat. Voilà de quelle manière apparaîtront vos quatre blocs de texte :

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Vous venez de personnaliser vos propriétés CSS pour empêcher ou permettre les renvois à ligne en utilisant quatre méthodes différentes.

Conclusion

Au cours de ce tutoriel, vous avez utilisé CSS pour empêcher les renvois à la ligne dans un bloc de texte. Vous avez mis en forme le texte à l’intérieur d’une boîte et ajouté la propriété white-space pour remplacer l’habillage par défaut. Pour en savoir plus sur la manière d’utiliser l’habillage de texte et les white-space, envisagez d’en apprendre davantage sur l’intégralité des fonctionnalités de la propriété white-space de CSS.