Nội dung chính
CSS cung cấp khả năng kiểm soát chính xác cách nội dung hiển thị trên trang web và thuộc tính overflow là một trong những công cụ quan trọng để thực hiện điều này. Overflow CSS giúp bạn quản lý cách hiển thị nội dung khi vượt quá kích thước vùng chứa, đảm bảo trang web luôn gọn gàng và không mất các thông tin. Trong bài viết này, ITviec sẽ hướng dẫn bạn cách ứng dụng các thuộc tính overflow vào thiết kế web.
Đọc bài viết để hiểu rõ hơn:
- Overflow CSS là gì?
- Cách sử dụng thuộc tính overflow CSS
- Cách sử dụng thuộc tính overflow CSS wrap
- Cách sử dụng thuộc tính overflow CSS text
- Câu hỏi thường gặp về overflow CSS
Overflow CSS là gì?
Mô hình hộp (box model) trong CSS gồm các thành phần (từ trung tâm ra ngoài): Nội dung (content), phần đệm (padding), viền (border) và lề (margin). Khi nội dung vượt ra ngoài bất kỳ thành phần nào khác của box model thì được gọi là overflow.
Khi này, các giá trị của thuộc tính overflow CSS được sử dụng để kiểm soát cách hiển thị của nội dung khi bị vượt ra khỏi box model.
Cách sử dụng các thuộc tính overflow CSS
Cú pháp của overflow CSS:
overflow: visible | hidden | scroll | auto | ellipsis | initial | inherit;
Các giá trị của thuộc tính overflow CSS có ý nghĩa như sau:
| Giá trị | Mô tả | Cú pháp |
| visible | Giá trị mặc định của thuộc tính overflow CSS. Với giá trị này, nội dung bị tràn khỏi box model vẫn tiếp tục hiển thị. |
overflow: visible;
|
| hidden | Nội dung vượt ra khỏi box model sẽ bị ẩn đi. |
overflow: hidden;
|
| scroll | Nội dung vượt ra khỏi box model bị ẩn đi. Tuy nhiên, người dùng có thể lăn chuột để xem phần nội dung đã bị ẩn. |
overflow: scroll; |
| auto | Nếu nội dung vượt ra khỏi box model, nội dung bị tràn sẽ ẩn đi. Khi này, thanh cuộn sẽ hiển thị, người dùng có thể cuộn để đọc nội dung còn lại. |
overflow: auto;
|
| initial | Sử dụng giá trị mặc định của thuộc tính, tức là visible. | overflow: initial; |
| inherit | Overflow sẽ có giá trị bằng giá trị của phần tử cha. | overflow: inherit; |
Sau đây là cách ứng dụng các giá trị của thuộc tính overflow CSS.
overflow: visible;
Khi thiết lập overflow CSS với giá trị mặc định là visible, nội dung bên trong phần tử sẽ hiển thị bên ngoài phần tử chứa nếu nó vượt quá kích thước của phần tử chứa và có thể chồng lấp lên các phần tử khác trong trang.
Ví dụ về overflow: visible;
| HTML | CSS |
|
<div id=”container”> <div class=”content”>Cú pháp overflow: visible; <br/> <br/> Khi thiết lập overflow CSS với giá trị mặc định là visible, nội dung bị tràn khỏi box model không bị cắt bớt mà sẽ tiếp tục hiển thị ra ngoài và có thể chồng lấp lên các phần tử khác trong trang. <br/> <br/> Nhắc lại <br/>Khi thiết lập overflow CSS với giá trị mặc định là visible, nội dung bị tràn khỏi box model không bị cắt bớt mà sẽ tiếp tục hiển thị ra ngoài và có thể chồng lấp lên các phần tử khác trong trang. </div> </div> |
#container { width: 100%; } .content { float: left; width: 200px; height: 250px; background: yellow; border: 1px solid black; margin: 0 10px 0; padding: 10px; } .content { overflow: visible; } |
Kết quả hiển thị:
overflow: hidden;
Thuộc tính hidden được sử dụng để che nội dung tràn ra ngoài phần tử chứa. Khi sử dụng giá trị này, bất kỳ phần nào của nội dung vượt quá kích thước của phần tử chứa sẽ bị cắt bớt và không hiển thị.
Ví dụ về overflow: hidden;
| HTML | CSS |
|
<div id=”container”> <div class=”content”>Cú pháp overflow: hidden; <br/> <br/> Để kiểm soát hiển thị phần nội dung bị tràn khỏi box model, bạn có thể đặt giá trị thuộc tính overflow CSS là hidden. Với giá trị này, phần nội dung sẽ chỉ hiển thị vừa đủ và không vượt quá padding. Tất cả phần nội dung thừa sẽ bị lược bỏ và không thể xem được. <br/> <br/> Nhắc lại <br/>Để kiểm soát hiển thị phần nội dung bị tràn khỏi box model, bạn có thể đặt giá trị thuộc tính overflow CSS là hidden. Với giá trị này, phần nội dung sẽ chỉ hiển thị vừa đủ và không vượt quá padding. Tất cả phần nội dung thừa sẽ bị lược bỏ và không thể xem được. </div> </div> |
#container {
width: 100%; } .content { float: left; width: 200px; height: 250px; background: yellow; border: 1px solid black; margin: 0 10px 0; padding: 10px; } .content { overflow: hidden; } |
Kết quả hiển thị:
overflow: scroll;
Thuộc tính scroll được sử dụng để tạo thanh cuộn cho phần tử chứa khi nội dung bên trong vượt quá kích thước của phần tử đó. Khi sử dụng giá trị này, thanh cuộn sẽ tự động xuất hiện khi có nội dung tràn và cho phép người dùng di chuyển để xem tất cả nội dung.
Ví dụ về overflow: scroll;
| HTML | CSS |
| <div id=”container”>
<div class=”content”>Cú pháp overflow: scroll; <br/> <br/> Giá trị scroll của thuộc tính overflow CSS được dùng để ẩn nội dung bị tràn khỏi box model nhưng vẫn cho phép người dùng xem được nội dung đã ẩn đó. Cụ thể với giá trị này, phần nội dung sẽ chỉ hiển thị đến mép padding, thanh cuộn sẽ được thêm vào box model để người dùng xem nội dung đã ẩn bằng cách cuộn. <br/> <br/> Nhắc lại <br/>Giá trị scroll của thuộc tính overflow CSS được dùng để ẩn nội dung bị tràn khỏi box model nhưng vẫn cho phép người dùng xem được nội dung đã ẩn đó. Cụ thể với giá trị này, phần nội dung sẽ chỉ hiển thị đến mép padding, thanh cuộn sẽ được thêm vào box model để người dùng xem nội dung đã ẩn bằng cách cuộn. </div> </div> |
#container { width: 100%; } .content { float: left; width: 200px; height: 250px; background: yellow; border: 1px solid black; margin: 0 10px 0; padding: 10px; } .content { overflow: scroll; } |
overflow: auto;
Với giá trị auto, nội dung vượt ra khỏi box model, nội dung bị tràn sẽ ẩn đi. Khi này, thanh cuộn sẽ hiển thị, người dùng có thể cuộn để đọc nội dung còn lại. Trong ví dụ dưới đây, cả hai div đều được đặt giá trị overflow là auto, nhưng div thứ hai có phần nội dung bị tràn khỏi box model. Hãy cùng xem sự khác biệt.
Ví dụ về overflow: auto;
| HTML | CSS |
|
<h2>overflow: auto;</h2> <div>Nếu nội dung vượt ra khỏi box model, nội dung bị tràn sẽ ẩn đi. Khi này, thanh cuộn sẽ hiển thị, người dùng có thể cuộn để đọc nội dung còn lại. </div> <div>Nếu nội dung vượt ra khỏi box model, nội dung bị tràn sẽ ẩn đi. Khi này, thanh cuộn sẽ hiển thị, người dùng có thể cuộn để đọc nội dung còn lại. <br/>Trong ví dụ dưới đây, cả hai div đều được đặt giá trị overflow là auto, nhưng chỉ có div thứ hai có nội dung tràn có thể cuộn và có thanh cuộn. </div> |
div { overflow: auto; box-sizing: border-box; width: 300px; height: 170px; padding: 20px; border: 1px solid; background-color: #FF7A59; font-family: Arial; margin: 10px; border-radius: 10px; } |
Kết quả hiển thị:
overflow-x và overflow-y
Thuộc tính overflow-x và overflow-y kiểm soát phần thể hiện nội dung bị tràn theo chiều ngang và chiều dọc. Cụ thể, overflow-x kiểm soát phần hiển thị theo chiều ngang, tức là bạn có thể di chuyển sang trái hoặc phải box model để xem phần nội dung bị ẩn.
Cú pháp:
overflow-x: visible | hidden | scroll | auto;
Ví dụ về overflow-x
| HTML | CSS |
|
<h2>CSS Overflow-x</h2> <div> <img src=”https://assets.codepen.io/6093409/2.jpeg” alt=”a mountain range” width=”400px”/> </div> |
div { overflow-x: scroll; overflow-y: hidden; box-sizing: border-box; width: 300px; height: 170px; padding: 20px; border: 1px solid; background-color: #FF7A59; margin: 10px; border-radius: 10px; } |
Trong khi đó, thuộc tính overflow-y kiểm soát hiển thị nội dung bị vượt khỏi box model theo chiều dọc. Điều này có nghĩa là, bạn cần cuộn từ trên xuống hoặc từ dưới lên để xem đầy đủ nội dung.
Cú pháp:
overflow-y: visible | hidden | scroll | auto;
Ví dụ về overflow-y
| HTML | CSS |
|
<h2>CSS Overflow-x</h2> <div> <img src=”https://assets.codepen.io/6093409/2.jpeg” alt=”a mountain range” width=”400px”/> </div> |
div { overflow-x: hidden; overflow-y: scroll; box-sizing: border-box; width: 300px; height: 170px; padding: 20px; border: 1px solid; background-color: #FF7A59; margin: 10px; border-radius: 10px; } |
Cách sử dụng thuộc tính overflow CSS wrap
Cú pháp:
overflow-wrap: normal | anywhere | break-word | initial | inherit;
| Giá trị | Mô tả | Ví dụ |
| normal | Những từ dài sẽ không bị ngắt, ngay cả khi chúng đã vượt quá container. Đây là giá trị mặc định. |
overflow-wrap: normal;
|
| anywhere | Những từ dài sẽ bị ngắt nếu chúng tràn khỏi container. |
overflow-wrap: anywhere;
|
| break-word | Những từ dài sẽ bị ngắt nếu chúng tràn khỏi container. |
overflow-wrap: break-word;
|
| initial | Sử dụng giá trị mặc định của thuộc tính, tức là visible. | overflow-wrap: initial; |
| inherit | Overflow sẽ có giá trị bằng giá trị của phần tử cha. | overflow-wrap: inherit; |
overflow-wrap: normal;
Khi giá trị overflow-wrap được đặt thành normal, dòng văn bản vẫn tiếp tục trải dài dù đã vượt khỏi box model và chỉ ngắt tại điểm tiếp theo của dòng đó, chẳng hạn khoảng cách giữa hai từ.
Ví dụ về overflow-wrap: normal;
| HTML | CSS |
|
<h2>overflow-wrap: normal;</h2> <div>Đây là một từ không có nghĩa, <strong>supercalifragilisticexpialidocious</strong> nhưng nó có thể là một ví dụ hữu ích để bạn hiểu hơn về giá trị này. </div> |
div { overflow: visible; overflow-wrap: normal; box-sizing: border-box; width: 200px; height: 170px; padding: 20px; border: 1px solid; background-color: #FF7A59; font-family: Arial; margin: 10px; border-radius: 10px; } |
Kết quả hiển thị:
overflow-wrap: anywhere;
Khi sử dụng giá trị anywhere, văn bản có thể tự động ngắt dòng tại các điểm ngắt bắt buộc, chẳng hạn các từ dài hoặc URL, để vừa với kích thước của dòng. Trường hợp này không sử dụng dấu gạch nối để chia các từ.
Ví dụ về overflow-wrap: anywhere;
| HTML | CSS |
|
<h2>overflow-wrap: normal;</h2> <div>Đây là một từ không có nghĩa, <strong>supercalifragilisticexpialidocious</strong> nhưng nó có thể là một ví dụ hữu ích để bạn hiểu hơn về giá trị này. </div> |
div { overflow: visible; overflow-wrap: anywhere; box-sizing: border-box; width: 200px; height: 170px; padding: 20px; border: 1px solid; background-color: #FF7A59; font-family: Arial; margin: 10px; border-radius: 10px; } |
Kết quả hiển thị:
overflow-wrap: break-word;
Nếu giá trị break-word được thiết lập, văn bản có thể ngắt tại các từ có dấu ngắt bắt buộc, nếu không có từ nào phù hợp. Tuy nhiên, không có dấu gạch ngang được chèn giữa các từ.
Ví dụ về overflow-wrap:break-word;
| HTML | CSS |
|
<h2>overflow-wrap: normal;</h2> <div>Đây là một từ không có nghĩa, <strong>supercalifragilisticexpialidocious</strong> nhưng nó có thể là một ví dụ hữu ích để bạn hiểu hơn về giá trị này. </div> |
div { overflow: visible; overflow-wrap: break-word; box-sizing: border-box; width: 200px; height: 170px; padding: 20px; border: 1px solid; background-color: #FF7A59; font-family: Arial; margin: 10px; border-radius: 10px; } |
Kết quả hiển thị:
Cách sử dụng thuộc tính overflow CSS text
Overflow CSS text là một khái niệm dùng để mô tả cách xử lý văn bản khi nó vượt quá kích thước của phần tử chứa nó bằng cách cắt bớt hoặc hiển thị dấu chấm lửng để làm dấu hiệu cho người dùng. Thuộc tính này giúp kiểm soát cách hiển thị văn bản khi nó không vừa với kích thước của phần tử.
Cú pháp:
text-overflow: clip | ellipsis | string | initial | inherit;
| Giá trị | Mô tả | Ví dụ |
| clip | Phần nội dung tràn ra ngoài sẽ bị lược bỏ. Người dùng không thể cuộn để xem nội dung bị lược bỏ. |
text-overflow: clip;
|
| ellipsis | Hiển thị dấu chấm lửng (“…”) để thể hiện văn bản đã cắt bớt. |
text-overflow: ellipsis;
|
| string | Hiển thị chuỗi đã cho để thể hiện văn bản đã cắt. |
text-overflow: string;
|
| initial | Sử dụng giá trị mặc định của thuộc tính, tức là visible. | overflow-wrap: initial; |
| inherit | Overflow sẽ có giá trị bằng giá trị của phần tử cha. | overflow-wrap: inherit; |
text-overflow: clip;
Khi đặt giá trị thuộc tính overflow CSS text là clip, nội dung bị tràn khỏi box model sẽ bị ngắt tại padding. Người dùng sẽ không thể nhìn thấy phần nội dung bị ẩn. Giá trị clip tương tự như hidden của thuộc tính overflow CSS. Sự khác biệt là clip không áp dụng scroll, bao gồm programmatic scroll.
Ví dụ:
| HTML | CSS |
|
<h2>text-overflow: clip;</h2> <div>Tuyển dụng Nhân tài IT tại Việt Nam cùng ITviec. Tuyển dụng Nhân tài IT tại Việt Nam cùng ITviec. Tuyển dụng Nhân tài IT tại Việt Nam cùng ITviec. Tuyển dụng Nhân tài IT tại Việt Nam cùng ITviec. Tuyển dụng Nhân tài IT tại Việt Nam cùng ITviec. Tuyển dụng Nhân tài IT tại Việt Nam cùng ITviec.</div> |
div { overflow: hidden; text-overflow: clip; white-space: nowrap; width: 250px; border: 1px solid; } |
Kết quả hiển thị:
text-overflow: ellipsis;
Giá trị ellipsis sẽ cắt nội dung bị tràn ra khỏi phần tử chứa tại padding và thay thế đoạn nội dung đã cắt bằng dấu ba chấm (…). Người dùng không thể nhìn thấy nội dung đã bị ẩn.
Ví dụ:
| HTML | CSS |
|
<h2>text-overflow: ellipsis;</h2> <div>Tuyển dụng Nhân tài IT tại Việt Nam cùng ITviec. Tuyển dụng Nhân tài IT tại Việt Nam cùng ITviec. Tuyển dụng Nhân tài IT tại Việt Nam cùng ITviec. Tuyển dụng Nhân tài IT tại Việt Nam cùng ITviec. Tuyển dụng Nhân tài IT tại Việt Nam cùng ITviec. Tuyển dụng Nhân tài IT tại Việt Nam cùng ITviec.</div> |
div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 250px; border: 1px solid; } |
Kết quả hiển thị:
Các câu hỏi thường gặp về overflow CSS
Có thể sử dụng overflow CSS để tạo các responsive design trên các kích thước màn hình khác nhau không?
Có thể tạo responsive design trên các kích thước màn hình khác nhau bằng cách sử dụng overflow CSS. Sử dụng các giá trị hidden, scroll có thể đảm bảo rằng nội dung luôn nằm trong các ranh giới đã xác định, tránh việc chồng lấn, cuộn trang hoặc không thể nhìn thấy được nội dung.
Hoặc sử dụng giá trị auto, thanh cuộn sẽ xuất hiện khi nội dung quá lớn để vừa với không gian đã xác định, người dùng có thể truy cập vào tất cả nội dung trong phần tử đó.
Làm thế nào để khắc phục sự cố liên quan đến overflow?
Khi khắc phục sự cố liên quan đến thuộc tính overflow CSS, cần đảm bảo thiết lập đúng cho phần tử và kiểm tra kích thước nội dung. Cần kiểm tra mã CSS để loại bỏ các xung đột kiểu dáng và sử dụng công cụ phát triển để xem xét các vấn đề như chồng chéo hoặc định nghĩa kích thước không chính xác.
Thử nghiệm trên nhiều thiết bị có thể phát hiện, khắc phục lỗi hiển thị nội dung vượt ra ngoài khung chứa.
Khi nào cần sử dụng overflow CSS?
- Khi nội dung của một phần tử tràn ra ngoài phần tử cha. Chẳng hạn, khi bạn có một đoạn văn bản dài trong một box có chiều cao cố định. Nếu văn bản dài hơn chiều cao của box, nó sẽ bị tràn ra ngoài. Sử dụng overflow CSS sẽ giúp bạn xử lý nội dung tràn này.
- Khi bạn muốn tạo thanh cuộn cho một phần tử. Ví dụ trang web của bạn có một bảng với lượng dữ liệu không thể hiện toàn bộ trên màn hình. Khi này, bạn có thể sử dụng overflow: scroll để tạo thanh cuộn, người dùng chỉ cần lăn chuột là có thể xem toàn bộ.
- Khi bạn muốn ẩn phần hình ảnh bị tràn. Bạn có một hình ảnh lớn hơn phần tử chứa nó. Khi này, bạn có thể sử dụng overflow: hidden để ẩn phần hình ảnh tràn ra ngoài phần tử. Đồng thời sử dụng overflow-x hoặc overflow-y và các giá trị để thiết lập cách hiển thị phần bị ẩn đi.
- Khi bạn muốn tạo hiệu ứng đặc biệt. Bạn có thể sử dụng overflow để tạo hiệu ứng như văn bản cắt xén hoặc hình ảnh chồng lên nhau, tuỳ theo ý tưởng trang web mà bạn muốn thể hiện.
Làm thế nào để ngăn nội dung tràn ra ngoài phần tử div?
Để đảm bảo nội dung không tràn ra ngoài phần tử <div>, bạn có thể đặt thuộc tính overflow của <div> thành hidden. Khi này, các nội dung vượt quá kích thước của <div> sẽ được ẩn đi, chứ không bị tràn ra ngoài gây rối bố cục.
Ngoài ra, bạn cũng có thể sử dụng các giá trị khác của thuộc tính overflow như auto hoặc scroll. Các giá trị này sẽ thêm thanh cuộn vào phần tử <div>, vừa ngăn được nội dung không bị tràn mà người dùng vẫn có thể dễ dàng xem được phần bị ẩn.
Tổng kết
Như vậy, trong bài viết này, ITviec đã hướng dẫn chi tiết cho bạn cách sử dụng thuộc tính overflow CSS để kiểm soát hiển thị các nội dung vượt quá box model của nó. Hy vọng những kiến thức về overflow CSS này sẽ giúp bạn xử lý tốt hơn các thách thức liên quan đến quản lý nội dung và không gian trang web.
Tham khảo các bài viết thuộc chủ đề CSS trên ITviec:
- Transition CSS là gì? Phân biệt transition CSS và animation CSS
- Border CSS: Hướng dẫn chi tiết 9 cách sử dụng border CSS
- Box shadow CSS là gì? 7 cách dùng box shadow CSS cơ bản
- Animation CSS: Tổng hợp 11 hiệu ứng Animation CSS phổ biến
- Tailwind CSS: Hướng dẫn 3 cách thiết lập Tailwind chi tiết
- Grid CSS: Cẩm nang sử dụng Grid CSS cơ bản
- Hướng dẫn chi tiết cách dùng 8 thuộc tính background CSS
- Hover CSS: Chi tiết cách tạo Hover CSS và các ví dụ cụ thể
- Transform CSS: Chi tiết cách chuyển đổi phần tử 2D và 3D