max-width

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Thuộc tính CSS max-width đặt chiều rộng tối đa của một phần tử. Nó ngăn giá trị được dùng của thuộc tính width trở nên lớn hơn giá trị được chỉ định bởi max-width.

Try it

max-width: 150px;

max-width: 20em;

max-width: 75%;

max-width: 20ch;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Change the maximum width.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  height: 80%;
  justify-content: center;
  color: white;
}

max-width ghi đè width, nhưng min-width ghi đè max-width.

Cú pháp

css

/* Giá trị <length> */
max-width: 3.5em;
max-width: anchor-size(--my-anchor inline, 245px);
max-width: calc(anchor-size(width) + 4em);

/* Giá trị <percentage> */
max-width: 75%;

/* Giá trị từ khóa */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fit-content(20em);
max-width: stretch;

/* Giá trị toàn cục */
max-width: inherit;
max-width: initial;
max-width: revert;
max-width: revert-layer;
max-width: unset;

Giá trị

<length>: Xác định max-width là một giá trị tuyệt đối.
<percentage>: Xác định max-width là một tỷ lệ phần trăm theo chiều rộng của khối chứa.
none: Không giới hạn kích thước của hộp.
max-content: max-width ưu tiên nội tại.
min-content: max-width tối thiểu nội tại.
fit-content: Sử dụng không gian có sẵn, nhưng không vượt quá max-content, tức là min(max-content, max(min-content, stretch)).
fit-content(<length-percentage>): Sử dụng công thức fit-content với không gian có sẵn được thay thế bằng đối số được chỉ định, tức là min(max-content, max(min-content, argument)).
stretch: Giới hạn chiều rộng tối đa của margin box của phần tử bằng chiều rộng của khối chứa. Nó cố gắng làm cho margin box lấp đầy không gian có sẵn trong khối chứa, tương tự như 100% nhưng áp dụng kích thước kết quả cho margin box thay vì hộp được xác định bởi box-sizing.

Note: Để kiểm tra các bí danh được sử dụng bởi trình duyệt cho giá trị stretch và trạng thái triển khai của nó, hãy xem phần Tương thích trình duyệt.

Khả năng tiếp cận

Đảm bảo rằng các phần tử được đặt max-width không bị cắt bớt và/hoặc không che khuất nội dung khác khi trang được thu phóng để tăng kích thước chữ.

Định nghĩa hình thức

Initial value	`none`
Applies to	all elements but non-replaced inline elements, table rows, and row groups
Inherited	no
Percentages	refer to the width of the containing block
Computed value	the percentage as specified or the absolute length or `none`
Animation type	a length, percentage or calc();

Cú pháp hình thức

max-width = 
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <size-keyword>  |
  <calc-size()>   |
  any             |
  <calc-sum>      

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Ví dụ

Đặt chiều rộng tối đa bằng pixel

Trong ví dụ này, phần tử "child" sẽ có chiều rộng 150 pixel hoặc chiều rộng của "parent", tùy theo giá trị nào nhỏ hơn.

HTML

html

<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>

CSS

css

#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}

Kết quả

Đặc tả kỹ thuật

Specification
CSS Box Sizing Module Level 4 # sizing-values

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content