Nó giúp chúng tôi kiểm soát điều gì sẽ xảy ra khi nội dung của một phần tử quá lớn để vừa với một khu vực. Khi điều này xảy ra, nội dung sẽ bị "tràn" sang một khu vực khác, theo chiều ngang [trục X] hoặc chiều dọc [trục Y]
Chúng tôi sẽ xem xét các giá trị sau của thuộc tính tràn và xem cách chúng hoạt động
visible
0body{ background: black; } div{ height: 200px; width: 200px; background: white; } p{ color: green; }
1body{ background: black; } div{ height: 200px; width: 200px; background: white; } p{ color: green; }
2body{ background: black; } div{ height: 200px; width: 200px; background: white; } p{ color: green; }
Cách sử dụng giá trị visible
Đây là giá trị mặc định mà thuộc tính overflow
nhận nếu không có giá trị nào được chỉ định. Với thuộc tính này, chúng ta có thể thấy rõ nội dung của mình khi nó tràn sang khu vực khác
Xem xét các ví dụ sau
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
Cái này khá cơ bản. Chúng tôi đã cung cấp cho trang của mình một màu nền đen. Chúng tôi đặt màu nền của phần tử
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
5 đóng vai trò là vùng chứa thành màu trắng. Nó có chiều cao và chiều rộng là 200px mỗi cái. Sau đó, chúng tôi làm cho văn bản của đoạn văn của chúng tôi có màu xanh lá câyĐây là những gì nó trông giống như
Văn bản nằm thoải mái trong vùng chứa màu trắng mà không vượt qua đường viền của vùng chứa trên cả hai trục. Nhưng điều này không phải lúc nào cũng đúng
Bạn có thể đang làm việc trên một dự án và sau đó nhận ra rằng một đoạn văn bản vượt qua ranh giới. Một cái gì đó như thế này
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Các kiểu CSS vẫn giữ nguyên. Bây giờ hãy xem điều gì đang xảy ra với vùng chứa và văn bản
Văn bản không thể vừa với vùng chứa màu trắng nên văn bản tràn ra ngoài và vượt qua đường viền của vùng chứa. Trong một dự án thực tế, điều này thậm chí còn khó chịu hơn vì bạn có văn bản này chồng lên các thành phần khác trên trang
Chúng tôi có thể thấy văn bản tràn vào một khu vực khác vì giá trị mặc định ở đây là visible
mặc dù chúng tôi không chỉ định điều đó
Hãy tiếp tục và thêm nó vào CSS của chúng ta để bạn có thể thấy thuộc tính overflow
đang được áp dụng
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
overflow: visible;
}
p{
color: green;
}
Chúng tôi đã thêm
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
8 vào body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
5. Kết quả vẫn như cũ – chúng ta sẽ thấy văn bản của mình tràn sang một khu vực khácTrong phần sắp tới, chúng ta sẽ thấy các giá trị khác nhau có thể giúp chúng ta kiểm soát điều gì sẽ xảy ra khi tràn nội dung
Cách sử dụng giá trị body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
0
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
Với giá trị
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
0, phần văn bản bị tràn sẽ bị cắt bỏ – nó sẽ "ẩn". Bạn không phải lo lắng về dung lượng tràn đang chiếm. Khi nội dung đã được cắt bỏ, nó sẽ không còn ở khu vực tràn vàoChúng ta sẽ xem xét một ví dụ trước khi nói về lý do tại sao đây không phải là giải pháp tốt nhất. Hãy thêm giá trị
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
0body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
overflow: hidden;
}
p{
color: green;
}
Đây là những gì xảy ra với văn bản trong vùng chứa
Như bạn có thể thấy, chúng tôi không còn thấy phần văn bản đó vượt qua đường viền của vùng chứa
Điều này giải quyết vấn đề có nội dung ở khu vực không được phép có, nhưng nó không cung cấp cách truy cập nội dung đã bị cắt. Vì vậy, chúng tôi sẽ giải quyết vấn đề đó trong phần tiếp theo
Cách sử dụng giá trị body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
1
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
Vì vậy, chúng tôi đã biết rằng giá trị
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
0 cắt văn bản ra và ẩn nó. Nhưng giá trị body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
1 cũng cắt văn bản và cung cấp thanh cuộn để chúng tôi có thể cuộn và xem phần văn bản đã bị cắtChúng ta hãy có một cái nhìn
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
overflow: scroll;
}
p{
color: green;
}
Bây giờ chúng ta có thanh cuộn trên cả hai trục. Thanh cuộn ngang không liên quan đến chúng tôi vì chúng tôi không có nội dung tràn theo hướng đó. Chúng tôi sẽ khắc phục điều này trong phần tiếp theo.
Cách sử dụng giá trị body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
2
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
overflow: auto;
}
p{
color: green;
}
Bây giờ thanh cuộn chỉ xuất hiện theo chiều dọc. Giá trị
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
2 phát hiện nơi tràn xảy ra và thêm một thanh cuộn theo hướng đó. Không có thanh cuộn nào được thêm vào theo chiều ngang vì chúng tôi không có tràn nội dung trong trục đó. Tương tự, nếu chúng ta không có tràn trên cả hai trục, thì sẽ không có thanh cuộn nào được thêm vào
Thuộc tính
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
8 và
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
9
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas
repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est
accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Trong các ví dụ chúng tôi đã sử dụng trong các phần trước, chúng tôi đã sử dụng thuộc tính overflow
. Điều này áp dụng cho cả trục ngang và trục dọc. Nếu bạn muốn kiểm tra tràn một cách riêng biệt, bạn có thể sử dụng các
8 chỉ định điều gì sẽ xảy ra khi nội dung tràn theo chiều ngang [từ trái sang phải].Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui! Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui! Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
9 chỉ định điều gì sẽ xảy ra khi nội dung tràn theo chiều dọc [từ trên xuống dưới].Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui! Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui! Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quas repellendus reprehenderit libero labore dolor omnis! Obcaecati ipsam est accusantium quis quos minus veniam eaque? Modi expedita mollitia et qui!
Các giá trị giống nhau – visible
,
body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
0, body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
1 và body{
background: black;
}
div{
height: 200px;
width: 200px;
background: white;
}
p{
color: green;
}
2 – cũng có thể được sử dụng ở đâyMột ví dụ nhanh
div {
overflow-x: hidden; /* overflow is visible in x-axis */
overflow-y: scroll; /* scrollbar is added when there is overflow in y-axis */
}
Phần kết luận
Trong hướng dẫn này, chúng tôi đã học cách kiểm soát tràn nội dung trên các trang của chúng tôi. Chúng tôi đã thấy các giá trị khác nhau mà chúng tôi có thể gán cho thuộc tính overflow
và kết quả khác nhau mà các giá trị này tạo ra
Cuối cùng, chúng ta đã học cách áp dụng các giá trị của thuộc tính overflow
chỉ theo hướng ngang hoặc dọc
mã hóa hạnh phúc
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Tiểu sử của tác giả này có thể được tìm thấy trong các bài viết của ông
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu