Comment éviter les sauts de ligne en CSS

CSS est un langage de feuille de style couramment utilisé dans le développement front-end, utilisé pour définir la mise en page, les polices, les couleurs, les tailles et autres styles des pages Web. Lors de l’écriture de styles CSS, nous rencontrons souvent de longues phrases ou des codes longs qui nécessitent des sauts de ligne. Mais parfois, nous ne voulons pas renvoyer à la ligne les lignes et souhaitons qu'elles restent affichées sur une seule ligne. Cet article explique comment éviter les sauts de ligne dans le code CSS.

1. Pourquoi le code s'enroule-t-il automatiquement ?

Tout d'abord, comprenons la raison pour laquelle le code s'enroule-t-il automatiquement ? Dans le code, si la valeur d'attribut d'un élément est trop longue et que l'affichage est incomplet, la plupart des navigateurs envelopperont automatiquement le texte par défaut. Celui-ci a pour but de faciliter la lecture et la maintenance et d'assurer la lisibilité du code.

Par exemple, ce qui suit est un code CSS :

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #eee;
}

Si l'une des valeurs d'attribut​​est trop longue et dépasse la zone visible de​​l'éditeur ou du navigateur, elle sera automatiquement renvoyée à la ligne et deviendra la code suivant :

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #eee;
}

Comme ceci Bien qu'il soit plus lisible, nous devons utiliser des techniques spéciales pour gérer certaines situations où nous devons économiser de l'espace ou ne forcer aucun saut de ligne.

2. Solution au code CSS qui ne s'enroule pas

Il existe de nombreuses techniques pour que le code CSS ne s'enroule pas. Voici quelques méthodes courantes :

1 Utilisez l'attribut white-space

En CSS, nous pouvons utiliser l'attribut white -space. pour définir la méthode d'habillage du texte. Cet attribut a trois valeurs : normal (valeur par défaut), pre-line et nowrap.

• normal : comportement par défaut du navigateur, ajusté automatiquement en fonction des espaces et des sauts de ligne.
• pré-ligne : sauts de ligne en fonction des sauts de ligne réels dans le texte.
• nowrap : Pas de retour à la ligne.

Donc, si nous voulons forcer l'absence de saut de ligne dans le code, nous pouvons définir l'attribut white-space sur nowrap dans la feuille de style.

Par exemple, le code suivant peut conserver le contenu du texte sur une seule ligne sans retour à la ligne. Il remplace les paramètres d'habillage par défaut, laissant le contenu du texte dans sa position d'origine.

.text {
  white-space: nowrap;
}

2. Utilisez l'attribut word-break

L'attribut word-break en CSS est utilisé pour spécifier la méthode de retour à la ligne automatique. Cet attribut a 4 valeurs : normal (valeur par défaut), break-all, keep-all et break-word.

• normal : enveloppe automatiquement les lignes en fonction des espaces et des traits d'union.
• break-all : lorsqu'un mot est trop long et dépasse la limite du conteneur, passe automatiquement à la ligne suivante.
• garder tout : évitez le retour à la ligne dans un mot et placez le mot entier dans un conteneur étroit.
• break-word : similaire à break-all, mais dans certains cas spécifiques, le mot entier sera conservé sur la même ligne.

Donc, si nous voulons forcer l'absence de saut de ligne dans le code, nous pouvons définir l'attribut word-break pour qu'il conserve tout dans la feuille de style.

Par exemple, le code suivant peut conserver le contenu du texte sur une seule ligne sans retour à la ligne. Il remplace les paramètres d'habillage par défaut, en conservant le contenu du texte dans sa position d'origine.

.text {
  word-break: keep-all;
}

3. Utilisez la propriété text-overflow

La propriété text-overflow en CSS est utilisée pour spécifier comment la partie au-delà du conteneur de texte est affichée. Cette propriété a 2 valeurs : clip (valeur par défaut) et points de suspension.

• clip : recadrez le texte et la partie excédentaire sera masquée.
• ellipse : utilisez des ellipses pour remplacer les pièces en excès.

Donc, si nous voulons forcer l'absence de sauts de ligne dans le code et afficher des points de suspension dans la partie excédentaire, nous pouvons définir l'attribut text-overflow sur points de suspension dans la feuille de style.

Par exemple, le code suivant peut empêcher le retour à la ligne du contenu du texte, le conserver sur une seule ligne et afficher des points de suspension dans la partie excédentaire. Il remplace les paramètres d'habillage par défaut, en conservant le contenu du texte dans sa position d'origine.

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

4. Utilisez l'attribut nowrap

Afin de garantir que les éléments ne s'enroulent pas, il existe un attribut similaire à l'attribut d'espace blanc en CSS, appelé l'attribut nowrap. Cet attribut n'a qu'une seule valeur : nowrap, ce qui signifie qu'il est interdit de wrapper les éléments.

Par exemple, le code suivant peut conserver le contenu du texte sur une seule ligne sans retour à la ligne. Il remplace les paramètres d'habillage par défaut, en conservant le contenu du texte dans sa position d'origine.

.text {
  white-space: nowrap;
}

5. Utilisez l'attribut inline-block

En CSS, nous pouvons également utiliser l'attribut display:inline-block pour conserver le mode d'affichage de l'élément. Cet attribut permet d'afficher des éléments sur la même ligne sans retour à la ligne.

Par exemple, le code suivant peut conserver le contenu du texte sur une seule ligne sans retour à la ligne. Il remplace les paramètres d'habillage par défaut, en conservant le contenu du texte dans sa position d'origine.

.text {
  display: inline-block;
}

6. Utilisez l'attribut height

En CSS, nous pouvons également utiliser l'attribut height pour spécifier la hauteur du conteneur. Si la hauteur d'un élément est définie comme une certaine valeur, son contenu ne peut pas être automatiquement renvoyé à la ligne.

Par exemple, le code suivant peut empêcher le retour à la ligne du contenu du texte et le conserver sur une seule ligne. Cela forcera la hauteur du conteneur à 20 pixels, gardant le contenu du texte dans sa position d'origine.

.text {
  height: 20px;
}

3. Résumé

Que nous envisagions d'économiser de l'espace ou pour d'autres raisons, nous pouvons parfois avoir besoin de forcer l'absence de saut de ligne dans CSS. Cet article présente 6 techniques couramment utilisées, notamment l'attribut d'espace blanc, l'attribut de coupure de mot, l'attribut de débordement de texte, l'attribut nowrap, l'attribut de bloc en ligne et l'attribut de hauteur. Le choix des attributs et des valeurs appropriés dépend du scénario et des exigences spécifiques de l'application.

Bien que ces méthodes interdisent essentiellement l'encapsulation automatique des éléments, les scénarios applicables et les méthodes de mise en œuvre de chaque méthode sont différents. La maîtrise de ces techniques peut nous aider à mieux gérer les feuilles de style CSS et à améliorer la lisibilité et la maintenabilité du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!