Qu'est-ce que le code CSS sans sauts de ligne ?

CSS n'enveloppe pas le code

Dans la conception Web, l'habillage du texte est un problème très important. Avec l'augmentation continue du nombre d'écrans et l'amélioration de la résolution, il y a de plus en plus de textes dans les pages Web. Comment rendre le texte adaptatif et automatiquement adapté à différentes tailles d'écran est devenu l'un des problèmes que les concepteurs de sites Web doivent prendre en compte.

Dans cet article, nous aborderons quelques moyens d'empêcher le retour à la ligne du texte en CSS pour vous aider à mieux comprendre comment gérer le retour à la ligne du texte.

1. Attribut White-space

L'attribut white-space en CSS contrôle l'affichage des espaces, des sauts de ligne et d'autres caractères dans le texte. Plus précisément, cet attribut a les valeurs suivantes :

1. normal : valeur par défaut. Enroulez automatiquement, que la limite soit atteinte ou non, plusieurs espaces seront fusionnés en un seul espace.
2. nowrap : pas de retour à la ligne, le texte se rétrécit automatiquement pour s'adapter à la taille du conteneur.
3. pre : conservez les espaces et les sauts de ligne, ne fusionnez pas plusieurs espaces et n'enroulez pas automatiquement les lignes.
4. pre-wrap : enveloppez automatiquement les lignes tout en préservant les espaces et les sauts de ligne.
5. pré-ligne : fusionnez automatiquement plusieurs espaces et enveloppez automatiquement les lignes.

L'utilisation de l'attribut white-space peut très facilement contrôler le retour à la ligne du texte. Choisissez simplement différentes valeurs en fonction des besoins réels.

2. Attribut Word-break

L'attribut word-break est utilisé pour contrôler l'habillage du texte dans une ligne, mais il est différent de l'attribut white-space en ce sens qu'il coupe les lignes dans les mots.

Cet attribut a les valeurs suivantes :

1. normal : valeur par défaut. Le texte s'enroule automatiquement, mais pas dans les mots.
2. break-all : le texte peut être brisé n'importe où (y compris à l'intérieur des mots).
3. keep-all : n'autorisez pas les sauts de ligne dans les mots à moins que le mot ne dépasse la largeur du conteneur.

Il convient de noter que contrairement à l'attribut white-space, l'attribut word-break ne fonctionne que sur les sauts de ligne dans les mots.

3. Attribut Overflow-wrap

L'attribut overflow-wrap est utilisé pour spécifier comment gérer un mot lorsqu'il ne peut pas rentrer complètement dans son conteneur. Comme l'attribut word-break, cet attribut n'affecte que les sauts de ligne dans les mots.

Cet attribut a les deux valeurs suivantes :

1. normal : valeur par défaut. Retour à la ligne selon les règles normales.
2. break-word : Lorsqu'un mot ne rentre pas complètement dans son conteneur, il peut se briser au milieu et continuer sur la ligne suivante.

4. Attribut text-overflow

L'attribut text-overflow est utilisé pour spécifier la méthode de traitement lorsque le texte dépasse les limites du conteneur. Cette propriété ne fonctionne que lorsque la propriété overflow est définie sur masqué ou scroll, et ne fonctionne que sur la largeur des éléments au niveau du bloc.

Cet attribut a les trois valeurs suivantes :

1. clip : valeur par défaut. Coupez directement le contenu excédentaire.
2. ellipse : ajoutez des points de suspension à la fin du texte lorsqu'il dépasse les limites du conteneur.
3. string : personnalisez le style lorsque le texte affiché dépasse les limites du conteneur, par exemple en utilisant "...", etc.

Résumé

Grâce à la discussion ci-dessus, nous pouvons tirer les conclusions suivantes :

1. Utilisez l'attribut white-space pour contrôler le retour à la ligne du texte et choisissez différentes valeurs en fonction des besoins réels.
2. Les propriétés word-break et overflow-wrap ne fonctionnent que sur les sauts de ligne dans les mots.
3. Utilisez l'attribut text-overflow pour contrôler la façon dont le texte est traité lorsqu'il dépasse les limites du conteneur.

Dans la conception Web actuelle, le problème du retour à la ligne de texte est un problème complexe et important, et il est nécessaire de choisir une méthode appropriée pour le résoudre en fonction de la situation spécifique. Dans différentes situations, différents attributs auront des effets différents et vous devez choisir en fonction de besoins spécifiques. J'espère que l'introduction de cet article pourra vous aider à mieux maîtriser la méthode de non-habillage de texte en CSS.

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!