Explication détaillée des propriétés de mise en page du texte CSS : débordement de texte et espace blanc

Explication détaillée des propriétés de mise en page du texte CSS : débordement de texte et espace blanc

Dans la conception Web, la mise en page du texte est un lien très important. Une mise en page raisonnable peut rendre le texte plus lisible et plus beau. CSS fournit plusieurs propriétés pour contrôler la façon dont le texte est affiché, notamment le débordement de texte et l'espace blanc. Cet article détaillera l'utilisation et un exemple de code de ces deux propriétés.

1. attribut text-overflow

L'attribut text-overflow est utilisé pour contrôler la façon dont le texte est affiché lorsqu'il dépasse le conteneur. Les valeurs courantes sont les suivantes :

1. clip : Valeur par défaut, la partie au-delà du conteneur sera coupée.
2. points de suspension : La partie au-delà du conteneur sera affichée avec des points de suspension (...).
3. string : La chaîne affichée peut être personnalisée.

Voici l'exemple de code :

<style>
  .container {
    width: 200px;
    white-space: nowrap; /* 强制不换行 */
    overflow: hidden; /* 超出容器部分隐藏 */
    text-overflow: ellipsis; /* 超出部分以省略号显示 */
  }
</style>

<div class="container">
  This is a long text that should be truncated with an ellipsis when it overflows.
</div>

Dans le code ci-dessus, nous utilisons un conteneur et définissons la largeur sur 200 px et le contenu du texte sur une longue phrase. En définissant l'attribut d'espace blanc sur nowrap, cela signifie qu'aucun retour à la ligne n'est forcé et que l'attribut de débordement est masqué, ce qui signifie que la partie au-delà du conteneur est masquée. La chose la plus importante est la propriété text-overflow, que nous définissons sur des points de suspension, ce qui signifie que l'excédent est affiché avec des points de suspension.

2. Attribut d'espace blanc

L'attribut d'espace blanc est utilisé pour contrôler la façon dont les caractères d'espacement sont traités dans le texte. Les valeurs courantes sont les suivantes :

1. normal : valeur par défaut, gère automatiquement les caractères d'espacement, fusionne les caractères d'espacement consécutifs en un seul espace, et les nouvelles lignes et les tabulations sont également traitées comme des espaces.
2. nowrap : ne forcez aucun saut de ligne, fusionnez les caractères d'espacement consécutifs en un seul espace.
3. pre : conservez les espaces d'origine et conservez le format d'espacement du texte.
4. pré-enveloppement : conservez les caractères d'espacement d'origine, autorisez les sauts de ligne et le texte sera affiché dans le format d'origine.
5. pré-ligne : gérez automatiquement les caractères d'espacement, mais conservez les sauts de ligne, autorisez les sauts de ligne et le texte sera affiché dans le format d'origine.

Voici l'exemple de code :

<style>
  .container {
    white-space: pre-wrap; /* 保留原始的空白符，允许换行 */
  }
</style>

<div class="container">
  This is a long text that should wrap when it reaches the container's width.
</div>

Dans le code ci-dessus, nous utilisons un conteneur et définissons la propriété white-space pour qu'elle soit pré-wrap afin que le texte conserve l'espace d'origine et autorise les nouvelles lignes.

En utilisant les deux attributs text-overflow et white-space, nous pouvons contrôler de manière plus flexible la disposition du texte pour le rendre plus beau et plus lisible. Dans la conception Web réelle, nous pouvons choisir les valeurs appropriées selon nos besoins et déboguer en fonction de l'exemple de code.

Résumé :

text-overflow et white-space sont des propriétés CSS utilisées pour contrôler la disposition du texte. text-overflow est utilisé pour contrôler la méthode d'affichage lorsque le texte dépasse le conteneur. Les valeurs communes sont clip, points de suspension et chaîne ; l'espace blanc est utilisé pour contrôler la façon dont les caractères d'espacement sont traités dans le texte. ​​sont normaux, nowrap, pre, pre-wrap et pre-line. En appliquant rationnellement ces deux attributs, nous pouvons obtenir de meilleurs effets de mise en page du texte.

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!