Qu'est-ce que les points de suspension en CSS sans sauts de ligne ?

Les points de suspension CSS sont un effet très pratique qui permet d'afficher un texte plus long sur une seule ligne et ajoute des points de suspension à la fin. Cela a de très bons effets sur l’embellissement de la mise en page et l’amélioration de l’expérience utilisateur.

En CSS, nous utilisons généralement le débordement de texte pour obtenir l'effet de points de suspension. Cependant, dans le processus de candidature proprement dit, nous constaterons que si le texte affiché sur une ligne est trop long, cela peut entraîner une confusion dans la mise en page et des situations qui ne répondent pas à nos attentes.

Si nous ne voulons pas que le texte soit trop long et provoque des problèmes de mise en page, nous pouvons utiliser l'attribut nowrap en CSS pour désactiver le retour à la ligne du texte. Bien que cet attribut ne soit pas souvent utilisé, il peut avoir des effets très pratiques dans le développement réel.

Ensuite, nous présenterons en détail comment utiliser l'attribut nowrap.

Première étape : désactiver l'habillage du texte

Avant d'utiliser l'attribut nowrap, nous devons d'abord désactiver l'habillage du texte. Dans la mise en page du texte CSS, il existe trois façons de désactiver l'habillage du texte :

1. Utilisez l'attribut white-space

L'attribut white-space peut être utilisé pour contrôler l'habillage du texte dans un élément. Il existe les valeurs d'attribut suivantes :

1) normal : valeur par défaut, c'est-à-dire aucun traitement spécial des caractères d'espacement et aucune restriction sur les sauts de ligne dans les mots.

2) pre : conservez les caractères d'espacement et le texte sera renvoyé à la position dans le code source.

3) nowrap : Pas de retour à la ligne.

Nous devons définir un espace blanc sur nowrap pour empêcher le retour à la ligne du texte dans l'élément.

Exemple de code :

p {
  white-space: nowrap;
}

2. Utilisation de l'attribut word-break

L'attribut word-break peut être utilisé pour contrôler la façon dont les mots sont brisés. Il existe les valeurs d'attribut suivantes :

1) normal : valeur par défaut, c'est-à-dire utilisant les règles de retour à la ligne par défaut.

2) garder tout : désactiver le fractionnement des mots.

3) break-all : autorisez les sauts de ligne dans les mots.

Nous devons définir l'attribut word-break sur keep-all pour garder le mot intact.

Exemple de code :

p {
  word-break: keep-all;
}

3. Utilisation de l'attribut overflow

Lorsque le contenu d'un élément dépasse la portée du conteneur, nous pouvons utiliser l'attribut overflow pour contrôler la façon dont le contenu déborde. Il existe les valeurs d'attribut suivantes :

1) visible : La valeur par défaut, qui permet d'afficher le contenu en dehors du conteneur.

2) caché : masquer le contenu en dehors du conteneur.

3) auto : faites défiler et affichez automatiquement le contenu.

4) scroll : force l'affichage de la barre de défilement afin que le contenu dépassant la portée du conteneur puisse être visualisé.

Nous devons définir l'attribut de débordement sur caché pour masquer le contenu en dehors du conteneur.

Exemple de code :

div {
  overflow: hidden;
}

Étape 2 : Ajouter des points de suspension

L'étape suivante consiste à ajouter des points de suspension. Nous devons utiliser l'attribut text-overflow et le définir sur points de suspension, ce qui ajoute des points de suspension à la fin du texte.

Exemple de code :

p {
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

Cela complète notre effet. Après avoir utilisé l'attribut nowrap, le contenu du texte ne sera pas automatiquement renvoyé à la ligne, mais sera affiché sur une seule ligne. Lorsque le texte dépasse la portée du conteneur, la partie cachée est remplacée par des ellipses.

Il convient de noter qu'après avoir utilisé l'attribut nowrap, le contenu du texte deviendra très étroit, ce qui entraînera une réduction de la police et une navigation difficile. Par conséquent, lorsque vous utilisez l'attribut nowrap, vous devez apporter les ajustements appropriés à la taille de la police.

Conclusion

L'effet de points de suspension en CSS En utilisant l'attribut nowrap, le texte peut être affiché sur une seule ligne et des points de suspension sont ajoutés à la fin. Cet effet convient aux textes plus longs qui doivent conserver un bon effet de mise en page lors de leur affichage. Il convient de noter que lors de l'utilisation de l'attribut nowrap, la taille de la police doit être ajustée de manière appropriée pour éviter d'affecter l'expérience utilisateur.

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!