Introduction à la technologie de retour à la ligne sans ligne CSS3 et exemples d'application

Le non-wrapping CSS3 fait référence à la définition d'un style dans le contenu du texte afin qu'il ne soit pas automatiquement renvoyé à la ligne lorsqu'il rencontre la fin de la ligne, mais qu'il continue à s'étendre jusqu'à la ligne suivante. Cette technique est souvent utilisée pour concevoir des lignes simples de texte ou des zones de code, etc., afin de rendre la page plus nette et plus claire.

En CSS3, il existe deux méthodes couramment utilisées pour réaliser un retour à la ligne : les espaces blancs et le retour à la ligne. Ensuite, nous présenterons chacun d’entre eux et donnerons des exemples d’application.

1. white-space

L'attribut white-space définit comment gérer la partie vide de l'élément.

Cet attribut a les valeurs facultatives suivantes :

1. normal : Par défaut. Ignorez les espaces supplémentaires.
2. nowrap : le texte ne s'enroule pas.
3. pre : Conservez tous les espaces et les nouvelles lignes.
4. pre-wrap : conservez tous les espaces et les nouvelles lignes, mais enveloppez-les.
5. pre-line : ignorez les espaces supplémentaires mais conservez les nouvelles lignes.

Exemple d'application :

<style>
    .nowrap {
        white-space: nowrap; /*文本不换行*/
    }
    .pre {
        white-space: pre; /*保留所有空格与换行符*/
    }
</style>
<div class="nowrap">这是一段不会换行的文本</div>
<div class="pre">这是一段<pre class="brush:php;toolbar:false"> 会 保 留 所 有 空 格 
和 换 行 符 

Copier après la connexion

2. word-wrap

L'attribut word-wrap est utilisé pour spécifier si un mot trop long peut être tronqué et placé sur la deuxième ligne lors du retour à la ligne. Dans les applications pratiques, lors de la définition d'une largeur de conteneur plus étroite, si nous ne voulons pas que les mots soient coupés mais que nous voulons pouvoir envelopper les lignes, nous devons définir cet attribut.

Cet attribut a les valeurs facultatives suivantes :

1. normal : Par défaut. Sauts de ligne uniquement aux points de césure autorisés (navigateur réservé).
2. break-word : saut de ligne à l'intérieur de mots longs ou d'adresses URL.

Exemples d'application :

<style>
    .break-word{
        word-wrap:break-word;
    }
</style>
<div style="width:100px;border:1px solid #000;">
    <p class="break-word">这是一个很长很长很长的单词：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

Ce qui précède est l'introduction et des exemples d'application de la technologie d'habillage sans ligne CSS3. Grâce à l'utilisation raisonnable de la technologie d'habillage sans ligne, la page peut être rendue plus flexible et l'évolutivité de la conception peut être augmentée.

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!