fit-content
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2021.
Từ khóa kích thước fit-content đại diện cho kích thước phần tử thích ứng với nội dung của nó trong khi vẫn nằm trong giới hạn của container chứa nó.
Từ khóa đảm bảo rằng phần tử không bao giờ nhỏ hơn kích thước nội tại tối thiểu (min-content) hoặc lớn hơn kích thước nội tại tối đa (max-content).
Note:
Từ khóa này khác với hàm fit-content(). Hàm được dùng để xác định kích thước track của lưới (ví dụ trong grid-template-columns và grid-auto-rows) và để xác định kích thước hộp đã bố cục cho các thuộc tính như width, height, min-width, và max-height.
Cú pháp
/* Dùng trong các thuộc tính kích thước */
width: fit-content;
height: fit-content;
inline-size: fit-content;
block-size: fit-content;
Mô tả
Từ khóa này được dùng với các thuộc tính kích thước như width, height, block-size, inline-size, min-width, và max-width. Khi dùng trên những thuộc tính này, kích thước tính toán tham chiếu đến content box của phần tử.
Khi fit-content được đặt, phần tử sẽ lớn lên hoặc co lại để vừa với nội dung của nó, nhưng ngừng mở rộng sau khi chiều liên quan đạt đến giới hạn kích thước của container chứa nó.
Kích thước fit-content được tính theo công thức sau:
min(max-content, max(min-content, stretch))
trong đó, stretch khớp với margin box của phần tử theo chiều rộng của containing block. Từ khóa này về cơ bản tương đương với fit-content(stretch).
Bạn có thể bật hoạt ảnh đến và từ fit-content bằng thuộc tính interpolate-size và hàm calc-size().
Ví dụ
Đặt kích thước hộp bằng fit-content
HTML
<div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
CSS
.container {
border: 2px solid #cccccc;
padding: 10px;
width: 20em;
}
.item {
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Box Sizing Module Level 4 # valdef-width-fit-content |
Khả năng tương thích trình duyệt
Xem thêm
- Các từ khóa kích thước liên quan:
min-content,max-content - Module CSS box sizing