Heim > Web-Frontend > CSS-Tutorial > So verwenden Sie das CSS-Leerraumattribut

So verwenden Sie das CSS-Leerraumattribut

青灯夜游
Freigeben: 2019-05-27 14:09:07
Original
5622 Leute haben es durchsucht

Das CSS-Attribut „white-space“ wird verwendet, um festzulegen, wie mit Leerzeichen innerhalb von Elementen umgegangen wird. Wenn beispielsweise „white-space: nowrap“ festgelegt ist, werden alle Zeilenumbrüche und Leerzeichen am Anfang und Ende der Zeile zusammengeführt. Der Text wird nicht umgebrochen und der Text wird in derselben Zeile fortgesetzt, bis das Tag

So verwenden Sie das CSS-Leerraumattribut

Wie verwende ich CSS-Leerraumattribute?

Das Whitespace-Attribut legt fest, wie mit Leerzeichen innerhalb des Elements umgegangen wird.

Dieses Attribut legt fest, wie mit Leerzeichen in Elementen während des Layoutprozesses umgegangen wird.

Syntax:

white-space : normal | pre | nowrap | pre-wrap | pre-line ;
Nach dem Login kopieren

Attributwert:

normal: Standard. Leerzeichen werden vom Browser ignoriert.

pre: Leerzeichen werden vom Browser beibehalten. Es verhält sich wie das

-Tag in HTML. </p><p>nowrap: Der Text wird nicht umgebrochen, bis das Tag <br> gefunden wird. </p><p>Vorumbruch: Leerzeichensequenzen beibehalten, Zeilen aber normal umbrechen. </p><p>Vorzeile: Leerzeichensequenzen zusammenführen, aber Zeilenumbrüche beibehalten. </p><p><strong>Hinweis: </strong>Die Werte pre-wrap und pre-line sind neu in CSS 2.1. </p><p>Hinweis: Jede Version von Internet Explorer (einschließlich IE8) unterstützt den Attributwert „inherit“ nicht. </p><p><span style="font-size: 18px;"><strong>Beispiel für eine CSS-Leerraumeigenschaft</strong></span></p><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
	</head>

	<head>
		<style type="text/css">
			.box{
				width: 500px;
				border: 1px solid #000;
				margin-bottom:10px ;
			}
			.p1 {
				white-space: nowrap
			}
		</style>
	</head>

	<body>
		<div class="box">
			<p>
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
			</p>
		</div>
		<div class="box">
			<p class="p1">
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
			</p>
		</div>
		
	</body>

</html>
Nach dem Login kopieren

Ausgabe:

So verwenden Sie das CSS-Leerraumattribut

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Leerraumattribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage