Maison > Article > interface Web > Introduction à la technologie de retour à la ligne sans ligne CSS3 et exemples d'application

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

PHPzoriginal: 2023-04-24 09:07:38583parcourir

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 :

normal : Par défaut. Ignorez les espaces supplémentaires.
nowrap : le texte ne s'enroule pas.
pre : Conservez tous les espaces et les nouvelles lignes.
pre-wrap : conservez tous les espaces et les nouvelles lignes, mais enveloppez-les.
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"> 会 保 留 所 有 空 格 
和 换 行 符

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 :

normal : Par défaut. Sauts de ligne uniquement aux points de césure autorisés (navigateur réservé).
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!

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：Discutez en détail des opérations d'ajout, de suppression et de modification de JavaScriptArticle suivant：Discutez en détail des opérations d'ajout, de suppression et de modification de JavaScript

Articles Liés

Voir plus