overflow-clip-margin
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Thuộc tính CSS overflow-clip-margin xác định khoảng cách bao xa bên ngoài ranh giới của một phần tử có overflow: clip có thể được vẽ trước khi bị cắt xén. Ranh giới được xác định bởi thuộc tính này được gọi là cạnh cắt tràn của hộp.
Cú pháp
css
/* Giá trị <length> */
overflow-clip-margin: 20px;
overflow-clip-margin: 1em;
/* <visual-box> | <length> */
overflow-clip-margin: content-box 5px;
/* Giá trị toàn cục */
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: revert-layer;
overflow-clip-margin: unset;
Giá trị <visual-box>, mặc định là padding-box, xác định cạnh hộp được dùng làm gốc cho cạnh cắt tràn. Giá trị <length> được chỉ định trong overflow-clip-margin phải không âm.
Note:
Nếu phần tử không có overflow: clip thì thuộc tính này sẽ bị bỏ qua.
Định nghĩa hình thức
| Initial value | 0px |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | the computed <length> and a <visual-box> keyword |
| Animation type | discrete |
Cú pháp hình thức
overflow-clip-margin =
<visual-box> ||
<length>
<visual-box> =
content-box |
padding-box |
border-box
Ví dụ
HTML
html
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
CSS
css
.box {
border: 3px solid black;
width: 250px;
height: 100px;
overflow: clip;
overflow-clip-margin: 20px;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Overflow Module Level 3 # overflow-clip-margin |
Tương thích trình duyệt
Xem thêm
- Các thuộc tính CSS liên quan:
text-overflow,white-space,overflow,overflow-inline,overflow-x,overflow-y,clip,display