la police CSS dépasse l'omission

Dans le développement Web, le contenu du texte dépasse souvent la portée du conteneur, ce qui affecte non seulement la beauté de la page, mais réduit également l'expérience de lecture de l'utilisateur. En réponse à cette situation, CSS propose une solution qui permet d'obtenir l'effet des polices au-delà de l'omission.

1. Principes de base du CSS au-delà des points de suspension

La police au-delà des points de suspension signifie que lorsque le contenu du texte à l'intérieur d'un élément dépasse l'espace alloué par l'élément, la partie excédentaire est représentée par des points de suspension (...) pour une meilleure compréhension Afficher contenu du texte, le débordement de texte CSS est obtenu grâce aux trois attributs suivants :

• text-overflow : utilisé pour contrôler la façon dont le texte est affiché après qu'il dépasse la largeur de l'élément 
• white-space : utilisé pour contrôler les sauts de ligne dans le texte ; et des espaces ;
• overflow : utilisé pour contrôler la manière dont le contenu de débordement d'un élément est affiché.

Parmi eux, l'attribut text-overflow contient les valeurs suivantes :

• clip : la valeur de l'attribut par défaut, le contenu en excès sera masqué ;
• ellipse : le contenu en excès affiche des ellipses (...).

2. La méthode d'implémentation spécifique de la police CSS dépassant l'omission

1. Texte sur une seule ligne dépassant l'omission

Pour le texte sur une seule ligne, nous pouvons obtenir l'effet de la police dépassant l'omission grâce aux méthodes suivantes :

.overflow-text {
  white-space: nowrap; /* 禁止换行 */
  text-overflow: ellipsis; /* 超出省略 */
  overflow: hidden; /* 溢出隐藏 */
}

Grâce à ce qui précède code, nous pouvons Le contenu du texte de la largeur du conteneur est masqué et remplacé par des points de suspension.

2. Le texte multiligne dépasse l'omission

Pour le texte multiligne, vous devez d'abord envelopper le contenu du texte, puis effectuer l'opération d'omission. Le code d'implémentation spécifique est le suivant :

.overflow-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 控制显示行数 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 超出省略 */
}

Parmi eux, -webkit-box-orient est utilisé pour sélectionner la direction d'habillage du texte, -webkit-line-clamp est utilisé pour contrôler le nombre de lignes d'affichage du texte, et enfin le contenu qui dépasse la largeur du conteneur est masqué et des points de suspension sont utilisés à la place.

3. Problème de compatibilité par omission de débordement de police CSS

Il convient de noter que l'attribut text-overflow peut ne pas être reconnu dans certains navigateurs, il doit donc être préfixé pour le traitement de compatibilité.

.overflow-text {
  white-space: nowrap;
  overflow: hidden;
  /* 兼容WebKit内核浏览器 */
  text-overflow: -webkit-ellipsis;
  /* 兼容非WebKit内核浏览器 */
  text-overflow: ellipsis;
}

4. Résumé

Grâce à la méthode ci-dessus, nous pouvons facilement obtenir l'effet d'omission de texte au-delà de la portée du conteneur et rendre la page plus belle et plus facile à lire. Dans le développement réel, nous devons ajuster des valeurs spécifiques pour obtenir les meilleurs résultats et prendre en compte les problèmes de compatibilité pour garantir un affichage correct dans différents navigateurs.

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!