泰国风 CSS 白色空间
该类在顺风 CSS 中接受多个值。所有的属性都包含在类的形式中。它是 CSS 空白属性的替代品。此类用于控制文本换行和白间距。此属性中有几种类型的值可供使用。
空白类:
- 空白-正常
- 空白-nowrap
- 空白-前置
- 空白-行前
- 空白-预包装
空白-正常:这是这个类的默认值。当顺风的空白类别设置为正常时，两个或更多空白的每个序列将作为单个空白出现。元素中的内容将在任何需要的地方换行。
语法:
<element class="whitespace-normal">...</element>
示例:
超文本标记语言
<!DOCTYPE html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Whitespace Class</b>
<div class="mx-24 bg-green-200 rounded-lg">
<p class="p-4 whitespace-normal text-justify">
Geeksforgeeks: A Computer Science portal for Geeks
those who wants to pursue an engineering degree or
wants to create a career on engineering field.
</p>
</div>
</body>
</html>
输出:
空白-正常
空白-无 rap: 当顺风的空白类别设置为无 rap 时，两个或更多空白的每个序列将作为单个空白出现。除非明确指定，否则元素中的内容不会换行。
语法:
<element class="whitespace-nowrap">...</element>
示例:
超文本标记语言
<!DOCTYPE html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Whitespace Class</b>
<div class="mx-24 bg-green-200 rounded-lg">
<p class="p-4 whitespace-nowrap text-justify">
Geeksforgeeks: A Computer Science portal for Geeks
those who wants to pursue an engineering degree or
wants to create a career on engineering field.
</p>
</div>
</body>
</html>
输出:
空白-nowrap
空白-pre: 该值使空白具有与 HTML 中的<【pre】>标签相同的效果。元素中的内容只有在使用换行符指定时才会换行。
语法:
<element class="whitespace-pre">...</element>
示例:
超文本标记语言
<!DOCTYPE html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Whitespace Class</b>
<div class="mx-24 bg-green-200 rounded-lg">
<p class="p-4 whitespace-pre text-justify">
Geeksforgeeks: A Computer Science portal for Geeks
those who wants to pursue an engineering degree or
wants to create a career on engineering field.
</p>
</div>
</body>
</html>
输出:
空白前置
空白-行前:当 tailwind 的空白类设置为行前值时，两个或更多空白的每个序列将作为单个空白出现。当需要和明确指定时，元素中的内容将被包装。
语法:
<element class="whitespace-pre-line">...</element>
示例:
超文本标记语言
<!DOCTYPE html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Whitespace Class</b>
<div class="mx-24 bg-green-200 rounded-lg">
<p class="p-4 whitespace-pre-line text-justify">
Geeksforgeeks: A Computer Science portal for Geeks
those who wants to pursue an engineering degree or
wants to create a career on engineering field.
</p>
</div>
</body>
</html>
输出:
空白-行前
空白-预换行:当顺风的空白类被设置为一个行前值时，每个空白序列将按原样出现。当需要和明确指定时，元素中的内容将被包装。
语法:
<element class="whitespace-pre-wrap">...</element>
示例:
超文本标记语言
<!DOCTYPE html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Whitespace Class</b>
<div class="mx-24 bg-green-200 rounded-lg">
<p class="p-4 whitespace-pre-wrap text-justify">
Geeksforgeeks: A Computer Science portal for Geeks
those who wants to pursue an engineering degree or
wants to create a career on engineering field.
</p>
</div>
</body>
</html>
输出:
空白预包装
版权属于：月萌API www.moonapi.com，转载请注明出处
