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.
Pour suivre ce tutoriel, vous aurez besoin de :
nano
ou Visual Studio CodeAu 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.
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 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>
</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.
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.