Explorer les propriétés de découpage de texte CSS : débordement de texte et débordement

Exploration des propriétés de découpage de texte CSS : débordement de texte et débordement

Introduction :
Dans le développement Web, nous rencontrons souvent des situations où le texte doit être découpé. CSS propose plusieurs façons de découper du texte, notamment les propriétés text-overflow et overflow. Cet article explore les deux propriétés et fournit des exemples de code concrets.

1. attribut text-overflow

1. text-overflow: clip
   Lorsque le texte dépasse les limites du conteneur, il sera automatiquement recadré et ne sera pas affiché en dehors du conteneur.

Exemple :

<style>
.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
</style>


<div class="container">
  这是一个超长的文本内容，当超出容器宽度时会被裁剪掉。
</div>

2. text-overflow: ellipsis
   Lorsque le texte dépasse la limite du conteneur, des ellipses seront utilisées pour indiquer la partie recadrée.

Exemple :

<style>
.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>


<div class="container">
  这是一个超长的文本内容，当超出容器宽度时会被用省略号表示。
</div>

2. Attribut de débordement

1. overflow : caché
   Lorsque le contenu dépasse les limites du conteneur, il sera recadré et ne sera pas affiché en dehors du conteneur.

Exemple :

<style>
.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}
</style>


<div class="container">
  <p>这是一个超长的文本内容，当超出容器宽度时会被裁剪掉。</p>
</div>

2. overflow: scroll
   Lorsque le contenu dépasse les limites du conteneur, une barre de défilement sera ajoutée pour afficher la partie recadrée, et l'utilisateur peut utiliser la barre de défilement pour afficher l'intégralité du contenu.

Exemple :

<style>
.container {
  width: 200px;
  height: 100px;
  overflow: scroll;
}
</style>


<div class="container">
  <p>这是一个超长的文本内容，当超出容器宽度时会增加滚动条。</p>
</div>

Conclusion : L'attribut
text-overflow est utilisé pour contrôler la méthode de recadrage lorsque le texte déborde du conteneur. Le clip peut directement recadrer la partie débordante, et les points de suspension utilisent les points de suspension pour indiquer la partie débordante. L'attribut overflow peut contrôler le comportement de débordement du conteneur, caché peut couper la partie de débordement et scroll ajoute des barres de défilement pour afficher le contenu. Dans les projets réels, vous pouvez sélectionner les attributs appropriés en fonction de vos besoins pour obtenir l'effet de recadrage du texte.

Bien que les propriétés de débordement de texte et de débordement fournissent toutes deux des fonctions de recadrage de texte, leurs scénarios applicables sont différents. text-overflow convient au recadrage d'une seule ligne de texte, tandis que overflow convient au recadrage de texte multiligne.

J'espère que cet article vous aidera à comprendre et à appliquer les propriétés de débordement de texte et de débordement.

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!