le texte CSS dépasse le saut de ligne

Le texte CSS dépasse le retour à la ligne

Dans la conception Web, nous rencontrons souvent des situations où le contenu du texte dépasse le conteneur parent. Pour le moment, nous devons utiliser CSS pour résoudre ce problème. CSS fournit certaines propriétés pour contrôler le retour à la ligne et la troncature du texte. Cet article présentera l'utilisation de ces propriétés et des cas pratiques.

1. Aménagement du texte

Lorsque le contenu du texte dépasse le conteneur parent, nous pouvons contrôler la méthode d'habillage du texte pour l'envelopper automatiquement dans le conteneur parent. Les propriétés CSS suivantes sont couramment utilisées :

1. word-wrap

Cette propriété est utilisée pour spécifier s'il faut autoriser les sauts de ligne dans les mots, et la valeur par défaut est normale. Lorsque la valeur de cet attribut est break-word, si la longueur d'un mot dépasse la largeur du conteneur, le mot sera automatiquement brisé et renvoyé à la ligne.

2. word-break

Cet attribut est utilisé pour spécifier comment les mots sont cassés. La valeur par défaut est normale. Lorsque la valeur de cet attribut est break-all, même un mot sera brisé même s'il ne dépasse pas la largeur du conteneur.

Ce qui suit est un exemple :

<code class="css">.container {
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    overflow: hidden;
}

.text {
    word-wrap: break-word;
    word-break: break-all;
}</code>

<code class="html"><div class="container">
    <p class="text">这是一段很长很长很长很长很长很长很长的文字，它会超出容器的宽度，需要我们使用CSS来控制其换行。</p>
</div></code>

2. Troncature du texte

Lorsque nous devons limiter la longueur du texte au lieu de le laisser s'enrouler sur de nouvelles lignes, nous pouvons utiliser la troncature du texte. Voici plusieurs propriétés CSS couramment utilisées :

1. overflow

Cette propriété est utilisée pour spécifier comment le contenu du conteneur parent se comportera lorsqu'il dépassera la taille du conteneur. La valeur par défaut est visible. Nous pouvons le définir sur caché, ce qui signifie que la partie au-delà du contenu sera masquée ; ou le configurer pour qu'il défile, ce qui signifie que la barre de défilement sera affichée.

2. text-overflow

Cet attribut est utilisé pour spécifier comment afficher le texte lorsqu'il déborde. La valeur par défaut est clip. Nous pouvons le définir sur points de suspension, ce qui signifie que des points de suspension seront automatiquement ajoutés lorsque le texte déborde.

3. white-space

Cet attribut est utilisé pour contrôler la façon dont l'espace blanc à l'intérieur de l'élément est traité. La valeur par défaut est normale. Nous pouvons le définir sur nowrap, ce qui signifie que le texte ne doit pas être renvoyé à la ligne sauf si la balise "br" est rencontrée.

Ce qui suit est un exemple :

<code class="css">.container {
    width: 200px;
    height: 50px;
    border: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text {
    width: 100%;
}</code>

<code class="html"><div class="container">
    <p class="text">这是一段很长很长很长很长很长很长很长的文字，它会被截断并自动加上省略号。</p>
</div></code>

Ce qui précède est la solution pour le texte CSS qui dépasse les sauts de ligne. J'espère que cela pourra être utile à tout le monde. Dans le processus de développement actuel, nous pouvons choisir les attributs appropriés en fonction des besoins réels pour obtenir les meilleurs résultats.

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!