Une plongée approfondie dans quelques astuces CSS3 au-delà des ellipses

La propriété text-overflow en CSS3 est une fonctionnalité très utile qui nous permet de contrôler la façon dont le contenu textuel d'un élément est affiché lorsqu'il dépasse la taille de son conteneur. Par défaut, le texte en dehors du conteneur est remplacé par des points de suspension (...). Dans cet article, nous aborderons certaines des astuces et utilisations de CSS3 au-delà des points de suspension.

Utilisation de base

Tout d'abord, jetons un coup d'œil à l'utilisation de base de l'attribut text-overflow. Il a trois valeurs facultatives :

• clip : coupe le texte au-delà du conteneur sans afficher les points de suspension.
• ellipse : affichez des points de suspension à la fin du conteneur. (Par défaut)
• string : affiche la chaîne spécifiée à la fin du conteneur.

Voici un exemple simple montrant comment afficher des points de suspension à la fin d'un conteneur :

div {
  width: 200px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

Cela affichera une ligne de texte dans un div de 200 pixels de large. Lorsque le texte dépasse la taille du conteneur, il est tronqué et remplacé par des points de suspension.

Utilisez avant ou après des pseudo-éléments pour ajouter des points de suspension

Utilisez l'attribut de style text-overflow pour vous rendre compte que le texte dépasse les points de suspension. Généralement, les points de suspension sont ajoutés à la fin du conteneur. Cette solution est l’approche la plus simple, mais aussi la plus courante. Si nous voulons mettre en avant davantage de points forts, nous devons alors réfléchir à des approches plus innovantes.

L'utilisation du pseudo-élément CSS :before ou :after peut facilement ajouter des points de suspension. Cette méthode peut généralement obtenir des effets spéciaux (par exemple : texte de points de suspension alignés à gauche). En ajoutant des styles, nous pouvons contrôler la façon dont le pseudo-élément s'affiche et remplacer l'affichage du texte original.

Le code suivant montre l'ajout de points de suspension à droite d'un conteneur :

div {
  position: relative;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

div:before {
  content: "...";
  position: absolute;
  right: 0;
  top: 0;
  background-color: #fff;
  padding: 0 2px;
}

Cela ajoutera des points de suspension à droite d'un conteneur. Nous avons placé le pseudo-élément dans le coin supérieur droit du conteneur en utilisant un positionnement absolu et y avons ajouté un fond blanc et un peu de remplissage pour garantir que les ellipses soient entièrement visibles.

Utilisez la fonction CSS3 calc() pour contrôler l'espace disponible pour les ellipses

La fonction calc() en CSS3 nous permet d'utiliser des expressions mathématiques en CSS, ce qui est très utile pour calculer dynamiquement la taille ou l'espacement. Au-delà des points de suspension, nous pouvons utiliser la fonction calc() pour contrôler l'espace disponible afin de garantir que le texte et les points de suspension peuvent être affichés complètement.

Le code suivant montre comment afficher du texte et des ellipses dans un conteneur de 300 pixels de large :

div {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div span {
  position: relative;
  display: inline-block;
  max-width: calc(100% - 20px); /* 容器宽度-省略号的宽度 */
  vertical-align: top;
}

div span:after {
  content: '...';
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
  text-align: center;
  background-color: #fff; /* 背景色和容器一致 */
}

Dans le code ci-dessus, nous avons utilisé deux styles clés : la fonction calc() et l'élément span. L'élément Span est défini sur inline-block, ce qui permet au texte d'occuper une ligne seul sans affecter le rendu des autres éléments. Utilisez l'attribut max-width pour définir la largeur maximale de l'élément span sur la largeur du conteneur moins la largeur des points de suspension. Cela garantit que le texte ne dépasse pas l'espace disponible du conteneur.

Utiliser CSS3 Flexbox

La mise en page Flexbox en CSS3 est très utile, elle nous permet de créer des mises en page flexibles et réactives en utilisant CSS. Lorsque nous devons afficher plusieurs lignes de texte dans un conteneur et que nous souhaitons ajouter une ellipse à la dernière ligne, l'utilisation de la disposition Flexbox est un bon choix.

Le code suivant montre comment utiliser la disposition Flexbox pour afficher plusieurs lignes de texte dans un conteneur de 300 pixels de large, en ajoutant des points de suspension sur la dernière ligne :

div {
  display: flex;
  flex-direction: column;
  height: 80px;
  width: 300px;
  overflow: hidden;
}

div p {
  flex: 1;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

div p:last-child {
  overflow: visible; /* 显示容器溢出的文本 */
  text-overflow: '';
  white-space: normal;
}

Dans le code ci-dessus, nous utilisons trois attributs de style clés : display : flex , flex-direction : colonne et flex : 1. Le conteneur Flex est défini sur flex-direction: column, de sorte que les éléments enfants soient disposés verticalement. Chaque élément de paragraphe est défini sur flex: 1 pour garantir qu'il occupe toute la hauteur du conteneur.

Le dernier élément de paragraphe est défini sur débordement : visible afin qu'il déborde du conteneur et affiche tout le texte. Nous définissons également la propriété text-overflow sur une chaîne vide afin qu'elle ne coupe pas le texte en ellipses. De cette façon, le texte du dernier élément de paragraphe débordera naturellement sur la dernière ligne du conteneur et la disposition Flexbox ajoutera automatiquement les points de suspension à la dernière ligne.

Résumé

Dans cet article, nous avons exploré quelques astuces et utilisations de CSS3 au-delà des ellipses. En plus de la propriété de base text-overflow, nous montrons également comment utiliser les pseudo-éléments et la fonction CSS3 calc() pour obtenir des effets plus créatifs. Nous avons également expliqué comment utiliser la mise en page CSS3 Flexbox pour afficher plusieurs lignes de texte et ajouter des points de suspension. Quelle que soit la technologie que vous utilisez, assurez-vous d'utiliser les meilleures pratiques lors de l'affichage du texte. Cela garantira que le texte s'affichera correctement dans divers contextes.

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!