css sans sauts de ligne

Dans la conception Web, les CSS (Cascading Style Sheets) sont un élément essentiel. CSS peut contrôler la mise en page, le style et le comportement des pages Web. L’une des touches de style de base est la façon dont le texte est renvoyé à la ligne. Par défaut, lorsque le texte atteint la fin d'une ligne, le navigateur passe automatiquement à la ligne suivante. Cependant, nous devons parfois afficher du texte sans sauts de ligne. Cet article explique comment utiliser CSS pour obtenir l'effet des sauts de ligne.

1. attribut d'espace blanc

Il existe un attribut d'espace blanc en CSS, qui détermine la façon dont le texte d'un élément est traité, y compris les espaces et les sauts de ligne. Par défaut, la valeur de l'attribut white-space est normale, ce qui signifie que la ligne sera automatiquement renvoyée à la ligne lorsqu'un espace ou un caractère de nouvelle ligne est rencontré. Cependant, nous pouvons obtenir l’effet d’aucun retour à la ligne en définissant la valeur de cette propriété.

1.white-space:normal

Par défaut, la valeur de l'attribut espace blanc est normale, ce qui signifie que le texte à l'intérieur de l'élément sera automatiquement renvoyé à la ligne lorsqu'il rencontrera des espaces, des tabulations, des nouvelles lignes et d'autres marques. Si vous souhaitez obtenir l'effet sans retour à la ligne, vous devez définir la valeur de l'attribut sur nowrap, comme indiqué ci-dessous :

p {
  white-space: nowrap;
}

La signification de ce code est de définir le texte de l'élément p pour qu'il ne soit pas renvoyé à la ligne.

2. white-space:pre

En plus de nowrap, l'attribut white-space a d'autres valeurs facultatives, telles que pre. Lorsque la valeur de l'attribut white-space est pre, le navigateur affichera le texte dans l'élément d'une manière préformatée, y compris les espaces, les tabulations, les nouvelles lignes, etc. Si vous souhaitez appliquer cette valeur d'attribut, il vous suffit de modifier le code comme suit :

p {
  white-space: pre;
}

3. white-space:pre-wrap

Une autre valeur est pre-wrap, qui peut forcer certains sauts de ligne tout en conservant une ligne naturelle. les sauts de ligne ou les espaces préformatés. Par exemple, le code suivant ajoutera deux espaces entre chaque mot :

p {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-spacing: 2px;
}

Lors de l'utilisation de l'attribut pre-wrap, nous pouvons également définir l'attribut word-wrap et l'attribut word-spacing pour contrôler davantage l'affichage du texte.

2. Attribut de débordement de texte

En plus de l'attribut d'espace blanc, il existe également un attribut CSS couramment utilisé pour éviter les sauts de ligne : le débordement de texte. Cet attribut est utilisé pour tronquer un texte trop long dans des éléments en ligne ou des éléments de bloc et le représenter avec des points de suspension, obtenant ainsi l'effet d'aucun retour à la ligne dans une certaine mesure.

L'attribut text-overflow a trois valeurs facultatives :

1. ellipses : points de suspension
2. clip : texte tronqué
3. string : chaîne personnalisée

Le code suivant montre comment utiliser l'attribut text-overflow pour supprimer un texte trop long Le texte est tronqué et affiché avec des points de suspension :

p {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Dans cet exemple, nous définissons d'abord la largeur de l'élément à 150 pixels, puis définissons l'attribut d'espace blanc sur nowrap afin que le texte ne soit pas renvoyé à la ligne. Ensuite, définissez l'attribut overflow sur masqué afin que la partie du texte qui s'étend au-delà des limites de l'élément soit masquée. Enfin, définissez la propriété text-overflow sur points de suspension afin que le texte tronqué apparaisse sous forme de points de suspension.

3. Attribut word-break

L'attribut word-break est utilisé pour contrôler la façon dont le texte est renvoyé à la ligne. Notez que cela n'est efficace que pour les textes anglais et autres textes dont les mots sont séparés par des espaces, et ne fonctionne pas pour les textes chinois et autres textes sans espaces. L'attribut

word-break a trois valeurs facultatives :

1. normal : utilisez les règles de saut de ligne par défaut, c'est-à-dire que le mot ne sera pas divisé en deux lignes ou plus.
2. break-all : brisera le texte dans les mots.
3. keep-all : n'enroulez que les lignes entre les caractères principaux (tels que les syllabes kanji, katakana et tani).

Le code suivant montre comment utiliser le saut de mot pour contrôler le retour à la ligne du texte :

p {
  width: 100px;
  word-break: break-all;
}

Dans cet exemple, nous définissons la largeur de l'élément p à 100 pixels, puis définissons l'attribut word-break sur break-all , utilisé pour briser le texte dans les mots.

Résumé

Ce qui précède est la méthode CSS sans retour à la ligne présentée dans cet article, y compris l'attribut d'espace blanc, l'attribut de débordement de texte et l'attribut de saut de mot. Dans la conception Web réelle, nous pouvons utiliser ces attributs de manière flexible en fonction de besoins spécifiques pour obtenir des effets de style de page et de mise en page.

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!