css qui désactive les sauts de ligne

CSS qui interdit les sauts de ligne

Dans la conception de sites Web, nous rencontrons souvent des situations où les sauts de ligne doivent être interdits. Par exemple, vous devez insérer un long lien ou une URL d'image dans un morceau de texte. Si ces liens s'étendent sur deux lignes ou même plus, cela détruira l'esthétique de la page et affectera l'expérience de lecture de l'utilisateur. À ce stade, nous devons utiliser CSS pour désactiver les sauts de ligne.

Il existe deux propriétés en CSS qui peuvent être utilisées pour interdire les sauts de ligne, à savoir "white-space" et "word-break".

1. attribut white-space

l'attribut white-space est utilisé pour contrôler les espaces et les sauts de ligne dans les éléments de style. Il a les valeurs suivantes :

• normal : valeur par défaut, indiquant les espaces et les sauts de ligne dans des circonstances normales
• . nowrap : interdire les sauts de ligne, mais autoriser les espaces
• pre : conserver les espaces et les nouvelles lignes, mais pas automatiquement
• pre-wrap : conserver les espaces et les nouvelles lignes, revenir automatiquement à la position appropriée
• pre-line : interdire les sauts de ligne, mais les espaces sont autorisés et les lignes sont automatiquement renvoyées à la position appropriée

Nous pouvons utiliser l'attribut nowrap pour interdire les sauts de ligne dans un élément. Par exemple, le texte de l'exemple suivant sera forcé à être affiché sur une seule ligne :

<p style="white-space:nowrap;">This is a sample text that will not be wrapped.</p>

2. attribut word-break

L'attribut word-break est utilisé pour contrôler la façon dont les mots sont renvoyés à la ligne, et il a les éléments suivants valeurs :

• normal : valeur par défaut, essayez de suivre le mot lorsque vous coupez la ligne
• break-all : force un saut de ligne lorsque le mot est trop long
• keep-all : si une chaîne contient certains caractères d'Asie de l'Est ( comme le chinois, le japonais, le coréen, etc.), le mot ne sera alors pas cassé

Nous pouvons utiliser l'attribut break-all pour interdire le retour à la ligne des mots dans un élément. Par exemple, le lien URL long dans l'exemple suivant sera forcé d'être renvoyé à la ligne :

<p style="word-break:break-all;">https://www.example.com/es?hl=zhcn&tab=rw</p>

Il convient de noter que si les attributs white-space et word-break sont utilisés simultanément dans un élément, leurs priorités sont différentes. Plus précisément, l'attribut word-break a priorité sur l'attribut white-space. Autrement dit, si vous souhaitez forcer les sauts de ligne et conserver tous les espaces, vous devez utiliser word-break: break-all; white-space: pre-wrap;, mais pas white-space: pre-wrap: break; -tous;.

De plus, en utilisation réelle, nous pouvons ajouter ces styles CSS au fichier CSS et les appeler pour atteindre l'objectif d'embellir la page Web.

Ce qui précède est une introduction aux techniques CSS pour désactiver les sauts de ligne. J'espère que cela vous sera utile.

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!