Tắt CSS tràn

Thuộc tính tốc ký CSS của

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

3 thiết lập hành vi mong muốn cho tràn phần tử — i. e. khi nội dung của một phần tử quá lớn để phù hợp với ngữ cảnh định dạng khối của nó — theo cả hai hướng

Thử nó

thuộc tính cấu thành

Thuộc tính này là cách viết tắt của các thuộc tính CSS sau

  • overflow = 
    [ visible | hidden | clip | scroll | auto ]{1,2}

    4
  • overflow = 
    [ visible | hidden | clip | scroll | auto ]{1,2}

    5

cú pháp

/* Keyword values */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

Thuộc tính

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

3 được chỉ định là một hoặc hai từ khóa được chọn từ danh sách các giá trị bên dưới. Nếu hai từ khóa được chỉ định, từ khóa đầu tiên áp dụng cho
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

4 và từ khóa thứ hai áp dụng cho
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

5. Mặt khác, cả
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

4 và
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

5 đều được đặt thành cùng một giá trị

giá trị

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

2

Nội dung không được cắt bớt và có thể được hiển thị bên ngoài hộp đệm

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

3

Nội dung được cắt bớt nếu cần thiết để vừa với hộp đệm. Không có thanh cuộn nào được cung cấp và không cho phép hỗ trợ cho phép người dùng cuộn [chẳng hạn như bằng cách kéo hoặc sử dụng bánh xe cuộn]. Nội dung có thể được cuộn theo chương trình [ví dụ: bằng cách đặt giá trị của một thuộc tính như phương pháp

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

4 hoặc
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

5], vì vậy phần tử vẫn là vùng chứa cuộn

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

6

Tương tự như

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

3, nội dung được cắt bớt vào hộp đệm của phần tử. Sự khác biệt giữa
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

6 và
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

3 là từ khóa
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

6 cũng cấm tất cả thao tác cuộn, bao gồm cả thao tác cuộn theo chương trình. Hộp không phải là hộp chứa cuộn và không bắt đầu ngữ cảnh định dạng mới. Nếu bạn muốn bắt đầu một bối cảnh định dạng mới, bạn có thể sử dụng
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

01 để làm như vậy

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

02

Nội dung được cắt bớt nếu cần thiết để vừa với hộp đệm. Các trình duyệt luôn hiển thị thanh cuộn cho dù có bất kỳ nội dung nào thực sự được cắt bớt hay không, ngăn không cho thanh cuộn xuất hiện hoặc biến mất khi nội dung thay đổi. Máy in vẫn có thể in tràn nội dung

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

03

Phụ thuộc vào tác nhân người dùng. Nếu nội dung vừa với hộp đệm, nó trông giống như

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

2, nhưng vẫn thiết lập bối cảnh định dạng khối mới. Trình duyệt máy tính để bàn cung cấp thanh cuộn nếu nội dung tràn

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

05 Không dùng nữa

Hoạt động giống như

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

03, nhưng với các thanh cuộn được vẽ trên đầu nội dung thay vì chiếm dung lượng

Tiện ích mở rộng Mozilla

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

07 Không dùng nữa

Sử dụng

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

08 thay thế

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

09 Không dùng nữa

Sử dụng

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

4. cuộn
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

5. ẩn
hoặc thay vào đó là
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

92.

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

93 Không dùng nữa

Sử dụng

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

4. ẩn
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

5. cuộn
hoặc thay vào đó là
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

96.

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

97 Không dùng nữa

Sử dụng

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

98 để thay thế

Kể từ Firefox 63,

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

07,
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

09 và
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

93 nằm sau cài đặt tùy chọn tính năng. Trong khoảng. cấu hình, đặt
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

32 thành
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

33

Sự mô tả

Các tùy chọn tràn bao gồm cắt bớt, hiển thị thanh cuộn hoặc hiển thị nội dung chảy ra khỏi vùng chứa của nó vào khu vực xung quanh

Chỉ định một giá trị khác với

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

2 [mặc định] hoặc
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

6 sẽ tạo ngữ cảnh định dạng khối mới. Điều này là cần thiết vì lý do kỹ thuật — nếu một dấu phẩy giao nhau với phần tử cuộn, nó sẽ buộc cuộn lại nội dung sau mỗi bước cuộn, dẫn đến trải nghiệm cuộn chậm

Để

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

3 có tác dụng, vùng chứa cấp khối phải có chiều cao đã đặt [
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

37 hoặc
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

38] hoặc
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

39 được đặt thành
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

40

Đặt một trục thành

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

2 [mặc định] trong khi đặt trục kia thành một giá trị khác sẽ dẫn đến việc
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

2 hoạt động như
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

03

Thuộc tính JavaScript

overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

44 có thể được sử dụng để cuộn một phần tử HTML ngay cả khi
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

3 được đặt thành
overflow = 
[ visible | hidden | clip | scroll | auto ]{1,2}

3

Chủ Đề