CSS - Overflow: Khả năng Kiểm soát Nội dung

Xin chào các nhà thuật toán CSS tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của CSS overflow. Là người dạy máy tính ở khu phố của bạn, tôi ở đây để hướng dẫn bạn trong hành trình thú vị này. tin tôi đi, đến cuối bài học này, bạn sẽ đầy ắp kiến thức (ý tôi muốn nói là "overflow"!)

CSS Overflow là gì?

Trước khi chúng ta bắt đầu, hãy hiểu xem "overflow" có nghĩa là gì trong ngữ cảnh CSS. Hãy tưởng tượng bạn có một hộp nhỏ, và bạn cố gắng nhét một con gấu bông khổng lồ vào trong nó. Điều gì sẽ xảy ra? Con gấu không vào được, đúng không? Đó chính xác là điều xảy ra với nội dung trong thiết kế web đôi khi. CSS overflow là cách chúng ta nói với trình duyệt phải làm gì khi nội dung quá lớn so với container của nó.

CSS overflow - Với các giá trị visible và hidden

Hãy bắt đầu từ cơ bản. Thuộc tính CSS overflow có hai giá trị cơ bản: visible và hidden.

visible (Mặc định)

Đây là hành vi mặc định. Nó giống như nói, "Hãy để nó treo ra ngoài!"

<div class="overflow-visible">
<p>Đây là một đoạn văn dài sẽ tràn ra khỏi container của nó.</p>
</div>

.overflow-visible {
width: 100px;
height: 100px;
border: 1px solid black;
overflow: visible;
}

Trong ví dụ này, văn bản sẽ tràn ra khỏi hộp, nhìn thấy rõ ràng. Nó giống như cánh tay và chân của con gấu bông sticking ra khỏi hộp.

hidden

Giá trị này giống như một trò ma thuật - nó làm cho overflow biến mất!

<div class="overflow-hidden">
<p>Đây là một đoạn văn dài sẽ bị ẩn nếu nó tràn ra.</p>
</div>

.overflow-hidden {
width: 100px;
height: 100px;
border: 1px solid black;
overflow: hidden;
}

Ở đây, bất kỳ nội dung nào không phù hợp trong hộp 100x100 pixel sẽ bị cắt bỏ, không nhìn thấy. Nó giống như chúng ta đã nhét con gấu bông vào hộp và đóng nắp kín!

CSS overflow - Giá trị clip

Giá trị clip giống như người anh em strict của hidden. Nó không chỉ ẩn overflow mà còn cấm tất cả các loại cuộn, bao gồm cả cuộn lập trình.

<div class="overflow-clip">
<p>Nội dung này sẽ bị cắt bỏ mà không có tùy chọn cuộn.</p>
</div>

.overflow-clip {
width: 100px;
height: 100px;
border: 1px solid black;
overflow: clip;
}

Với clip, nó giống như chúng ta đã đóng hộp và seal nó kín. Không có cách nào để nhìn thấy hoặc di chuyển!

CSS overflow - Với các giá trị scroll và auto

Bây giờ, hãy nhìn vào hai giá trị cho phép chúng ta có một chút灵活性: scroll và auto.

scroll

Giá trị này luôn thêm thanh cuộn, bất kể chúng có cần thiết hay không.

<div class="overflow-scroll">
<p>Nội dung này có thể cần cuộn, hoặc có thể không!</p>
</div>

.overflow-scroll {
width: 100px;
height: 100px;
border: 1px solid black;
overflow: scroll;
}

Nó giống như tặng hộp của bạn một bộ bánh xe, chỉ trong trường hợp bạn cần di chuyển thứ gì đó.

auto

Đây là tùy chọn thông minh. Nó chỉ thêm thanh cuộn khi cần thiết.

<div class="overflow-auto">
<p>Nội dung này sẽ có thanh cuộn chỉ khi nó tràn ra.</p>
</div>

.overflow-auto {
width: 100px;
height: 100px;
border: 1px solid black;
overflow: auto;
}

Hãy nghĩ về auto như một người bạn giúp đỡ chỉ khi bạn cần.

CSS Overflow - Các Thuộc tính Liên quan

Bây giờ chúng ta đã thành thạo các基础知识, hãy nhìn vào một số thuộc tính liên quan cho phép chúng ta kiểm soát nhiều hơn:

Thuộc tính	Mô tả	Ví dụ
overflow-x	Điều khiển overflow theo chiều ngang	overflow-x: scroll;
overflow-y	Điều khiển overflow theo chiều dọc	overflow-y: hidden;
overflow-wrap	Chỉ định có nên break từ khi nội dung tràn ra khỏi phần tử bao bọc hay không	overflow-wrap: break-word;
text-overflow	Chỉ định cách nội dung tràn ra không hiển thị nên được thông báo cho người dùng như thế nào	text-overflow: ellipsis;

Hãy nhìn vào chúng trong hành động:

<div class="overflow-fancy">
<p>Đây là một đoạn văn rất dài với một từ không thể break-word-rất-dài.</p>
</div>

.overflow-fancy {
width: 200px;
height: 100px;
border: 1px solid black;
overflow-x: scroll;
overflow-y: hidden;
overflow-wrap: break-word;
text-overflow: ellipsis;
white-space: nowrap;
}

Trong ví dụ này:

• Overflow theo chiều ngang sẽ hiển thị thanh cuộn
• Overflow theo chiều dọc sẽ bị ẩn
• Từ dài sẽ break để phù hợp với chiều rộng
• Nếu văn bản tràn ra theo chiều ngang, nó sẽ kết thúc bằng dấu ba chấm (...)

Nó giống như chúng ta đã tặng hộp của mình một cây dao đa năng của khả năng kiểm soát nội dung!

Kết luận

Và đây bạn đã có, các bạn! Chúng ta đã khám phá thế giới tràn ngập của CSS overflow. Từ việc ẩn và hiển thị đơn giản đến việc kiểm soát nội dung phức tạp, bạn bây giờ đã có các công cụ để quản lý nội dung của mình như một chuyên gia.

Nhớ rằng, thiết kế web là tất cả về việc tạo ra những trải nghiệm người dùng tuyệt vời. Đôi khi đó có nghĩa là hiển thị tất cả, đôi khi đó có nghĩa là ẩn bớt, và đôi khi đó có nghĩa là cho người dùng quyền kiểm soát để khám phá theo tốc độ của họ.

Khi bạn luyện tập các kỹ thuật này, bạn sẽ phát triển trực giác về khi nào nên sử dụng phương pháp nào. Và谁知道? Có lẽ một ngày nào đó bạn sẽ dạy thế hệ nhà thiết kế web tiếp theo về những kỳ diệu của CSS overflow!

Đến下次, hãy giữ nội dung của bạn trong kiểm soát và sự sáng tạo của bạn tràn ngập!

Credits: Image by storyset