Maison > Article > interface Web > Présentation des nouvelles fonctionnalités de CSS3 : Comment utiliser CSS3 pour obtenir des effets de débordement de texte sur plusieurs lignes

Présentation des nouvelles fonctionnalités de CSS3 : Comment utiliser CSS3 pour obtenir des effets de débordement de texte sur plusieurs lignes

WBOYoriginal: 2023-09-10 12:37:41837parcourir

Un aperçu des nouvelles fonctionnalités de CSS3 : Comment utiliser CSS3 pour obtenir un effet de débordement de texte sur plusieurs lignes

CSS3 est une norme pour la conception de styles de pages Web, qui introduit de nombreuses nouvelles fonctionnalités et fonctions, offrant aux développeurs plus de style. capacités de sélection et de dessin. L'une des exigences courantes est d'obtenir un effet de débordement de texte multiligne, c'est-à-dire qu'après avoir dépassé la largeur spécifiée du conteneur, le texte sera automatiquement renvoyé à la ligne et la partie débordée affichera des ellipses. Cet article expliquera comment utiliser CSS3 pour obtenir cet effet.

Tout d'abord, pour obtenir l'effet de débordement de texte multiligne, vous devez utiliser deux propriétés CSS3 : text-overflow et white-space.

1. text-overflow
L'attribut text-overflow est utilisé pour contrôler la façon dont le texte est affiché lorsqu'il déborde. Il a trois valeurs possibles :

clip : lorsque le texte déborde, la partie qui dépasse la plage du conteneur est rognée ;
ellipsis : lorsque le texte déborde, les points de suspension sont utilisés pour remplacer la partie débordante ; le texte déborde, la chaîne spécifiée est utilisée pour le remplacer. Partie de débordement (applicable au navigateur IE).
2. white-space

L'attribut white-space est utilisé pour contrôler la façon dont les caractères d'espacement sont traités. La valeur par défaut est normale, c'est-à-dire que les caractères d'espacement consécutifs seront fusionnés en un seul espace et le texte sera automatiquement renvoyé à la ligne. Lorsqu'il est défini sur nowrap, le texte ne sera pas renvoyé à la ligne et sera affiché sur la même ligne.

Avec ces deux attributs, nous pouvons obtenir un effet de débordement de texte multiligne. Voici un exemple :

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 200px;
  height: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text {
  white-space: nowrap;
}
</style>
</head>
<body>

<div class="container">
  <div class="text">这是一段很长很长的文本，用于演示多行文本溢出效果。</div>
</div>

</body>
</html>

Dans l'exemple ci-dessus, nous avons créé un conteneur (la classe est un conteneur), défini une largeur et une hauteur fixes et défini la propriété de débordement sur caché, de sorte que lorsque le texte déborde, il soit caché au-delà partie. Dans le même temps, définissez l'attribut text-overflow sur points de suspension, ce qui signifie que les points de suspension seront utilisés lorsque le texte déborde.

Dans le conteneur, nous avons ajouté un élément de texte (la classe est du texte) et défini l'attribut d'espace blanc sur nowrap, afin que le texte ne soit pas automatiquement renvoyé à la ligne, mais soit toujours affiché sur la même ligne.

Exécutez le code ci-dessus, vous pouvez voir que le texte dans le conteneur dépasse la largeur du conteneur, mais au lieu de déborder, des ellipses sont affichées.

Résumé :

Les propriétés de débordement de texte et d'espace blanc CSS3 sont la clé pour obtenir un effet de débordement de texte multiligne. En définissant text-overflow sur points de suspension, la partie qui dépasse la largeur du conteneur est remplacée par des ellipses ; en définissant white-space sur nowrap, le texte est affiché sur la même ligne, obtenant ainsi un effet de débordement de texte sur plusieurs lignes.

En développement réel, nous pouvons ajuster les styles des conteneurs et des éléments de texte en fonction des besoins réels pour obtenir de meilleurs effets d'affichage. Dans le même temps, nous pouvons également utiliser d'autres propriétés et techniques CSS, telles que l'utilisation d'une mise en page flexible, la limitation du nombre maximum de lignes, etc., pour améliorer encore la contrôlabilité et la beauté de l'effet de débordement de texte multiligne.

Les nouvelles fonctionnalités de CSS3 donnent aux développeurs front-end plus d'espace pour créer des styles et des effets, et la réalisation d'effets de débordement de texte sur plusieurs lignes n'en est qu'une petite partie. À mesure que la norme CSS3 continue de se développer et de s'améliorer, nous pensons que davantage de nouvelles fonctionnalités et fonctionnalités apparaîtront, apportant davantage de surprises et d'inspiration créative aux développeurs.

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!

css css3 String 字符串 class overflow flex

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Propriétés CSS des médias auditifsArticle suivant：Propriétés CSS des médias auditifs

Articles Liés

Voir plus