Class này chấp nhận nhiều giá trị trong tailwind CSS, các thuộc tính được bao phủ dưới dạng class.Nó là một cách khác để dùng CSS Max-Height property. Class này dùng để đặt chiều cao tối đa cho một phần tử.
Nếu nội dung phần tử lớn hơn chiều cao tối đa, nội dung sẽ tràn. Ngược lại sẽ không có hiệu ứng. Nếu nội dung nhỏ hơn thì cũng không có hiệu ứng. Giá trị class height có thể bị ghi đè bởi class max-height.
Các class Max-Height:
- max-h-0
- max-h-px
- max-h-full
- max-h-screen
Lưu ý: Bạn có thể thay đổi số với các giá trị "rem" hợp lệ.
max-h-0
Class này dùng để đặt chiều cao tối đa cụ thể cho bất kỳ phần tử nào.
Cú pháp:
<element class="max-h-0">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<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 Max-Height Class</b>
<div class="mx-48 h-24 bg-green-200 p-8">
<div class="max-h-0 bg-green-400
rounded-lg">max-h-0</div>
</div>
</body>
</html>
Đầu ra:
max-h-px
Class này được dùng để đặt chiều cao cụ thể 1px cho phần tử.
Cú pháp:
<element class="max-h-px">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<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 Max-Height Class</b>
<div class="mx-48 h-24 bg-green-200 p-8">
<div class="max-h-px bg-green-400
rounded-lg">max-h-px</div>
</div>
</body>
</html>
Đầu ra:
max-h-full
Class này dùng để đặt chiều cao tối đa của một phần tử là full. Chiều cao sẽ phụ thuộc vào phần tử cha của nó.
Cú pháp:
<element class="max-h-full">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<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 Max-Height Class</b>
<div class="mx-48 h-24 bg-green-200 p-8">
<div class="h-48 max-h-full bg-green-400
rounded-lg">max-h-full</div>
</div>
</body>
</html>
Đầu ra:
max-h-screen
Class này được dùng để làm cho một phần tử trải dài toàn bộ chiều cao của viewport. Để kiểm soát max-height của phần tử tại điểm ngắt cụ thể hãy thêm tiền tố "screen". Thêm tiền tố vào bất kỳ tiện ích max-height hiện có nào.
Cú pháp:
<element class="max-h-screen">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<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 Max-Height Class</b>
<div class="mx-48 h-48 bg-green-200 p-8">
<div class="max-h-screen bg-green-400
rounded-lg">max-h-screen</div>
</div>
</body>
</html>
Đầu ra:
