Chúng tôi có thể xác định chiều rộng tối đa 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 max-width không cho phép hộp nội dung của phần tử rộng hơn ngay cả khi chiều rộng lớn hơn chiều rộng tối đa.
Cú pháp
Cú pháp của thuộc tính CSS max-width như sau -
Selector {
max-width: /*value*/
} Hãy xem một ví dụ cho thuộc tính chiều rộng tối đa CSS -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>CSS max-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{
max-width:200px;
overflow: hidden;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</div>
<button onclick="add()" class="btn">Set maxWidth</button>
</div>
<script>
function add() {
document.querySelector('#contentDiv').style.maxWidth = "100%";
}
</script>
</body>
</html> Đầu ra
Trước khi nhấp vào ‘Đặt maxWidth’ nút -
Sau khi nhấp vào ‘Đặt maxWidth’ nút -
Hãy xem một ví dụ khác cho thuộc tính CSS max-width -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>CSS max-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;
}
#contentDiv1, #contentDiv2{
width:100%;
border: 1px solid black;
margin: 0 auto;
}
#contentDiv2{
width: 80%;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv1">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</div>
<div id="contentDiv2">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy.
</div>
<button onclick="add()" class="btn">Set maxWidth</button>
</div>
<script>
function add() {
document.querySelector('#contentDiv1').style.maxWidth = "80%";
}
</script></body></html> Đầu ra
Trước khi nhấp vào ‘Đặt maxWidth’ nút -
Sau khi nhấp vào ‘Đặt maxWidth’ nút -
