Chúng tôi có thể xác định chiều rộng tối thiểu cố định cho hộp nội dung của phần tử bằng cách sử dụng thuộc tính CSS min-width không cho phép hộp nội dung của phần tử hẹp hơn ngay cả khi chiều rộng nhỏ hơn chiều rộng tối thiểu.
Cú pháp
Cú pháp của thuộc tính CSS min-width như sau -
Selector {
min-width: /*value*/
} Ví dụ
Hãy xem một ví dụ cho thuộc tính chiều rộng tối thiểu CSS -
<!DOCTYPE html>
<html>
<head>
<title>CSS min-width Property</title>
</head>
<style>
* {
padding: 2px;
margin:5px;
}
button {
border-radius: 10px;
}
#containerDiv {
width:70%;
margin: 0 auto;
padding:20px;
background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
text-align: center;
border-radius: 10px;
}
.contentDiv{
min-width:200px;
border: 1px solid black;
}
</style>
<body>
<div id="containerDiv">
<div class="contentDiv">
This is paragraph 1 with some dummy text.
</div>
<div class="contentDiv">
This is paragraph 2 with some dummy text.
</div>
<div class="contentDiv">
This is paragraph 2 with some dummy text.
</div>
<button onclick="add()" class="btn">Set minWidth</button>
</div>
<script>
function add() {
document.querySelectorAll('.contentDiv')[1].style.minWidth = "100%";
}
</script>
</body>
</html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
Trước khi nhấp vào ‘Đặt chiều rộng tối thiểu’ nút -
Sau khi nhấp vào ‘Đặt chiều rộng tối thiểu’ nút -
Ví dụ
Hãy xem một ví dụ khác cho thuộc tính chiều rộng tối thiểu CSS -
<!DOCTYPE html>
<html>
<head>
<title>CSS min-width Property</title>
</head>
<style>
* {
padding: 2px;
margin:5px;
}
button {
border-radius: 10px;
}
#containerDiv {
width:70%;
margin: 0 auto;
padding:20px;
background-image: linear-gradient(62deg, #fbab7e 0%, #f7ce68 100%);
text-align: center;
border-radius: 10px;
}
.contentDiv{
min-width:200px;
border: 1px solid black;
}
</style>
<body>
<div id="containerDiv">
<div class="contentDiv">
This is paragraph 1 with some dummy text.
</div>
<div class="contentDiv">
Lorem Text
</div>
<div class="contentDiv">
This is paragraph 3 with some dummy text.
</div>
<button onclick="add()" class="btn">Set minWidth</button>
</div>
<script>
function add() {
var all = document.querySelectorAll('.contentDiv');
for(var i=0; i<all.length; i++)
all[i].style.minWidth = "100%";
}
</script>
</body>
</html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
Trước khi nhấp vào ‘Đặt chiều rộng tối thiểu’ nút -
Sau khi nhấp vào ‘Đặt chiều rộng tối thiểu’ nút -
