Maison  >  Article  >  interface Web  >  Comment utiliser l'espace blanc:nowrap en CSS

Comment utiliser l'espace blanc:nowrap en CSS

php中世界最好的语言
php中世界最好的语言original
2017-11-22 10:55:4814686parcourir

white-space:nowrap est généralement utilisé dans des situations particulières. Aujourd'hui, nous allons étudier sa structure syntaxique et ses paramètres par défaut afin que tout le monde puisse se familiariser avec white-space:nowrap

. La norme d'espace blanc DIV CSS nowrap force tout le texte à être affiché sur la même ligne, de sorte que tout le contenu du texte soit affiché sur une seule ligne sans retour à la ligne.

Laissez le texte ne pas s'enrouler automatiquement. Quelle que soit la largeur CSS définie, tout le texte sera affiché sur une seule ligne. Surtout pour la liste de titres, nous souhaitons afficher un seul contenu de titre par ligne, mais parfois la largeur est limitée et le texte du titre a trop de largeur (largeur) et est limité, ce qui entraînera le texte à wrap automatiquement. Dans ce cas, nous pouvons utiliser des espaces blancs. Le style permet de l'afficher sur une seule ligne sans retour à la ligne. Bien sûr, afin de masquer le contenu du texte en excès, nous pouvons ajouter un débordement CSS. :style caché.

Syntaxe et structure des espaces blancs

Syntaxe des espaces blancs :

Espace blanc : nowrap normal

Paramètres des espaces blancs :

normal : méthode de traitement par défaut

nowrap : force tout le texte à être affiché sur la même ligne et ne sera renvoyé à la ligne qu'à la fin du texte ou en rencontrant la balise br objet . Il est recommandé d'utiliser white-space:nowrap pour ne forcer aucun saut de ligne.

description de l'espace blanc :

l'espace blanc définit ou récupère le mode d'affichage du texte dans l'objet. Habituellement, nous utilisons white-space:nowrap pour forcer le contenu à être affiché sur une seule ligne

Habituellement, nous utilisons white-space:nowrap pour forcer le contenu du texte à ne pas s'enrouler et afficher tout le contenu du texte sur une seule ligne. au sein de l'objet.

Cas pratique sur les espaces blancs

J'ai configuré 2 boîtes d'objets, un paramètre oblige le pair à afficher le contenu du texte. Le deuxième paramètre force les pairs à s'afficher, mais utilise la balise html br pour observer l'effet. Pour l'effet d'application du cas des espaces blancs, j'ai défini la largeur CSS sur 120 px, la hauteur CSS sur 60 px et la hauteur de ligne CSS hauteur de ligne sur 20 px.

1. code CSS

2. Extrait de code HTML

une ligne Forcer l'affichage complet

Le contenu utilise br pour envelopper
Affichage des sauts de ligne

l'espace blanc n'oblige aucun saut de ligne et br force le saut de ligne du cas CSS

l'espace blanc n'oblige aucun saut de ligne et force le saut de ligne de tag br

Daily Us Afin de permettre au contenu du texte d'être affiché sur une seule ligne, même si la largeur n'est pas suffisante, il ne peut pas être renvoyé à la ligne. Cependant, si nous rencontrons le retour à la ligne forcé html br. , que l'espace blanc soit défini ou non, il sera forcé par le saut de ligne

Lecture connexe :

Comment apprendre Div et CSS

Comment utiliser la position CSS

Comment définir la largeur minimale et la largeur maximale du CSS

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