Comment empêcher le texte d'être renvoyé en CSS-tutoriel CSS-php.cn

Comment empêcher le texte d'être renvoyé en CSS

青灯夜游

Libérer： 2023-01-04 09:38:49

original

24482 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut white-space pour empêcher le retour à la ligne du texte. Il vous suffit d'ajouter le style "white-space: nowrap;" à l'élément contenant le texte. L'attribut white-space est utilisé pour spécifier comment gérer les espaces dans l'élément ; lorsque la valeur est définie sur nowrap, le texte ne sera pas renvoyé à la ligne.

Comment empêcher le texte d'être renvoyé en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version css1, ordinateur Dell G3.

Recommandation du didacticiel : Tutoriel vidéo CSS

En CSS, vous pouvez utiliser l'attribut white-space pour afficher le texte sans retour à la ligne tant que la valeur du white- ; L'attribut space est que Nowrap peut forcer le texte à ne pas être renvoyé à la ligne.

Attribut CSS white-space

L'attribut white-space spécifie comment gérer l'espace blanc dans l'élément.

Comment empêcher le texte dêtre renvoyé en CSS

Valeur de l'attribut :

normal : Valeur par défaut. Les espaces blancs sont ignorés par le navigateur.
pre : Les espaces vides seront conservés par le navigateur. Il se comporte comme la balise
```
 
```
Copier après la connexion
nowrap : Le texte ne sera pas renvoyé à la ligne et le texte continuera sur la même ligne jusqu'à ce que la balise
pre-wrap : préserve les séquences d'espaces, mais s'enroule normalement.
pré-ligne : fusionne les séquences d'espaces mais conserve les nouvelles lignes.

Exemple : white-space:nowrap est identique à la normale, mais fusionne également les espaces, mais ne s'enroulera pas en fonction de la taille du conteneur, indiquant qu'il n'y a pas de retour à la ligne.

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			p {
				width: 400px;
				height: 50px;
				border: 1px solid pink;
				
			}
			.nowrap{
				white-space: nowrap;
			}
		</style>
	</head>
 
	<body>
		<p>普通文本！！！
			这是一些文本。 这是一些文本。 这是一些文本。
		</p>
		<p class="nowrap">强制文字不换行！！！
			这是一些文本。 这是一些文本。 这是一些文本。
		</p>
	</body>
 
</html>

Copier après la connexion

Rendu :

Comment empêcher le texte dêtre renvoyé en CSS

white-space:nowrap empêchera le texte de s'enrouler. Il est souvent utilisé avec le débordement et le texte-. débordement, comme suit :

.wscont{
     margin:12px;
     padding:12px;
     width:300px;
     background: #f1f1f1;
     border:1px solid  #bababa;
     line-height:32px;
     font-size: 15px;
     font-family:  "微软雅黑" ;
     white-space:nowrap;
     overflow:hidden;
     text-overflow: ellipsis;
}
 
<div class= "wscont" >
     妹纸前端测试white-space属性,
     white-space属性的keywrod值。
</div>

Copier après la connexion

L'effet est le suivant :

Comment empêcher le texte dêtre renvoyé en CSS