Comment définir le texte à ne pas envelopper en CSS

Dans la conception de sites Web, le texte est l'un des éléments les plus importants. Comment faire en sorte que le texte présente le meilleur effet sur la page est une question à laquelle nous devons réfléchir. Comment empêcher le retour à la ligne du texte est l’un des problèmes les plus courants. Cet article explorera comment contrôler que le texte ne soit pas renvoyé via CSS.

1. Attribut d'espace blanc

L'attribut d'espace blanc est un attribut important en CSS et est utilisé pour contrôler la façon dont les caractères d'espacement dans les éléments sont traités. Il comprend principalement les valeurs suivantes :

1. normal

C'est la valeur par défaut, ce qui signifie que les caractères vides seront ignorés par le navigateur. S'il y a des caractères vides consécutifs, le navigateur n'affichera qu'un seul caractère vide.

2. pre

pre signifie conserver les caractères vides, ce qui conservera les caractères vides écrits en HTML, ce qui entraînera l'affichage des caractères vides en HTML sur la page.

3. nowrap

nowrap signifie que les sauts de ligne ne sont pas autorisés. S'il n'y a pas assez d'espace pour afficher le texte dans une ligne, le texte débordera de la portée de l'élément.

4. pre-wrap

pre-wrap signifie conserver les caractères d'espacement en HTML et autoriser les sauts de ligne.

5. pré-ligne

pré-ligne signifie conserver les caractères d'espacement en HTML, mais ignorer les caractères d'espacement consécutifs et autoriser les sauts de ligne.

2. Attribut Word-wrap

L'attribut word-wrap est utilisé pour contrôler la façon dont le navigateur traite les mots. Si les mots d'une ligne sont trop longs, la largeur de l'élément augmentera au-delà de la largeur de l'élément parent, affectant la mise en page de la page.

1. normal

Il s'agit de la valeur par défaut, ce qui signifie que le navigateur ne brisera pas les nouvelles lignes dans les mots.

2. break-word

break-word brisera les nouvelles lignes dans les mots pour empêcher les mots d'affecter la mise en page.

3. Utilisation combinée de l'espace blanc et du retour à la ligne 

Les attributs d'espace blanc et de retour à la ligne peuvent être utilisés ensemble pour obtenir l'effet de contrôle du retour à la ligne du texte.

1. white-space:nowrap;

word-wrap:break-word;

Cela signifie que les sauts de ligne ne sont pas autorisés, mais lorsque le mot dépasse la largeur de l'élément parent parce que le mot est trop long, le le saut de ligne sera interrompu à l’intérieur du mot.

2. white-space:pre-wrap;

word-wrap:break-word;

Cela signifie préserver les caractères d'espacement en HTML, autoriser les sauts de ligne, tout en cassant les sauts de ligne dans les mots.

En combinant plusieurs valeurs, nous pouvons obtenir des effets de contrôle plus précis.

Résumé :

Pour contrôler le texte sans retour à la ligne à l'aide de CSS, vous pouvez utiliser l'attribut d'espace blanc et l'attribut de retour à la ligne, combinés avec plusieurs valeurs. Ceci est très important pour l’effet de mise en page du site Web. Si vous souhaitez contrôler l'alignement vertical du texte, le masquage du débordement de texte et d'autres effets spéciaux, vous pouvez également l'utiliser en conjonction avec d'autres propriétés CSS. Utilisez-le simplement de manière flexible et vous obtiendrez deux fois le résultat avec la moitié de l'effort de conception Web.

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!