Comment empêcher les éléments de s'enrouler en CSS

Dans la conception Web, nous devons parfois empêcher le retour à la ligne de certains éléments, mais les afficher tous sur une seule ligne. Dans ce cas, nous devons utiliser CSS. Ensuite, cet article vous expliquera comment utiliser CSS pour empêcher le retour à la ligne des éléments.

1. attribut white-space

L'attribut white-space est l'une des propriétés CSS qui contrôle les espaces et les sauts de ligne dans les éléments. En définissant l'attribut white-space, nous pouvons empêcher les éléments de s'enrouler ou conserver leur habillage.

1. Définissez l'élément pour qu'il ne soit pas enveloppé

Si vous souhaitez que le texte de l'élément soit affiché sur la même ligne, vous pouvez définir l'attribut d'espace blanc sur nowrap , comme indiqué ci-dessous : # 🎜🎜#

div{
    white-space: nowrap;
}

Le code ci-dessus signifie que le texte de l'élément div ne sera pas renvoyé à la ligne.

2. Conserver les sauts de ligne

Si vous souhaitez conserver les sauts de ligne dans l'élément, vous pouvez définir l'attribut d'espace blanc sur pre ou pre-wrap, comme indiqué ci-dessous. :

div{
    white-space: pre;
}

div{
    white-space: pre-wrap;
}

2. Attribut d'affichage

En plus de l'attribut d'espace blanc, nous pouvons également utiliser l'attribut d'affichage pour obtenir l'effet d'éléments non enveloppés. Deux valeurs sont disponibles pour l'attribut display : inline et inline-block.

1.inline

Définissez l'attribut d'affichage de l'élément sur inline pour afficher l'élément et le texte sur la même ligne, comme indiqué ci-dessous :

span{
    display: inline;
}

#🎜 🎜 #Le code ci-dessus signifie que l'élément span et le texte sont affichés sur la même ligne.

2.inline-block

Définissez l'attribut d'affichage de l'élément sur inline-block, ce qui permet à l'élément et au texte d'être affichés sur la même ligne, mais vous pouvez définissez la largeur et la hauteur de l'élément, comme indiqué ci-dessous :

div{
    display: inline-block;
    width: 100px;
    height: 50px;
}

Le code ci-dessus signifie que l'élément div et le texte sont affichés sur la même ligne, et que la largeur et la hauteur de l'élément sont définies.

3. Attribut de débordement

Parfois, un texte long entraînera le retour à la ligne automatique des éléments. Si vous souhaitez empêcher les éléments de se retourner, vous pouvez utiliser l'attribut de débordement. L'attribut overflow a deux valeurs : visible et masqué.

1.visible

Définissez l'attribut de débordement de l'élément sur visible, ce qui signifie que le contenu de l'élément est autorisé à déborder de la boîte de l'élément, comme indiqué ci-dessous : #🎜🎜 #

div{
    overflow: visible;
}

2 .hidden

Définissez l'attribut de débordement de l'élément sur caché, ce qui signifie empêcher le contenu de l'élément de déborder de la boîte de l'élément, comme indiqué ci-dessous :

div{
    overflow: hidden;
}

# 🎜🎜#Ces trois façons d'utiliser CSS pour empêcher les éléments de s'enrouler Méthodes : attribut d'espace blanc, attribut d'affichage et attribut de débordement. Choisir différentes méthodes dans différentes circonstances peut obtenir de meilleurs effets d'affichage sur les pages Web.

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!