CSS Overflow

của chúng tôi không thể vừa với phần tử, thì văn bản sẽ hiển thị bên ngoài hộp của phần tử. Như bạn có thể thấy, điều này đã dẫn đến một số văn bản overflowing bên ngoài hộp.

Giá trị hiển thị của phần tràn, mặc dù hữu ích, nhưng có thể không thích hợp bằng các giá trị khác cho thuộc tính tràn. Điều này là do trong hầu hết các trường hợp, bạn không muốn nội dung của một phần tử bị tràn, vì nội dung bị tràn có thể ảnh hưởng đến các kiểu khác mà bạn đã tạo cho một trang web.

Scroll Overflow

Giá trị cuộn cho phép bạn cắt bớt nội dung tràn của phần tử web. Sau đó, một thanh cuộn sẽ được thêm vào phần tử để người dùng có thể xem nội dung tràn.

Giá trị tràn cuộn thêm cả thanh cuộn dọc và ngang vào phần tử web, ngay cả khi bạn không cần một trong các thanh cuộn này.

Giả sử chúng ta đang thiết kế một hộp và chúng ta muốn bất kỳ văn bản tràn nào nằm trong hộp của chúng ta. Nếu có bất kỳ văn bản tràn nào, một thanh cuộn sẽ xuất hiện để người dùng có thể điều hướng theo cách của họ qua hộp.

Đây là mã chúng tôi có thể sử dụng để thiết kế hộp của mình:

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "scroll".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: scroll;
}

Mã của chúng tôi trả về:

[Code result here]


Trong mã của chúng tôi, chúng tôi đã tạo một hộp rộng 200px x cao 100px. Hộp của chúng tôi có màu nền xám nhạt.

Hơn nữa, chúng tôi đặt thuộc tính tràn bằng "scroll". Như bạn có thể thấy, vì có quá nhiều văn bản để vừa với hộp của chúng ta, một thanh cuộn sẽ xuất hiện và văn bản tràn của chúng ta vẫn nằm trong đường viền của hộp.

Tự động tràn

Chúng tôi đã đề cập trong phần trước rằng thuộc tính cuộn thêm cả thanh cuộn ngang và dọc vào phần tử web, ngay cả khi một trong những thanh cuộn này không cần thiết.

Điều này có thể hữu ích trong nhiều trường hợp, nhưng khi thiết kế một phần tử web, bạn có thể chỉ muốn thanh cuộn có liên quan xuất hiện. Để làm như vậy, bạn có thể sử dụng giá trị tự động.

Giá trị tự động hoạt động theo cách tương tự với giá trị cuộn, nhưng nó chỉ thêm thanh cuộn vào phần tử web khi cần thiết. Giả sử chúng ta có một hộp văn bản và chúng ta chỉ muốn thêm các thanh cuộn vào hộp khi cần thiết. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "auto".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: auto;
}

Mã của chúng tôi trả về:

[Code result here]


Trong ví dụ trên, chúng tôi đã tạo một hộp cao 200px rộng 100px với nền màu xám nhạt. Sau đó, chúng tôi đặt giá trị của thuộc tính tràn thành tự động. Như bạn có thể thấy, trong kết quả cuối cùng của chúng tôi, chỉ có một thanh cuộn được hiển thị. Điều này là do chỉ cần một thanh cuộn để hiển thị nội dung tràn trong hộp văn bản của chúng ta.

Tràn ẩn

Bạn có thể quyết định rằng bạn muốn bất kỳ nội dung tràn nào trong một phần tử được cắt bớt, sau đó ẩn khỏi người dùng. Điều này được thực hiện bằng cách sử dụng giá trị tràn ẩn.

Giả sử bạn có một hộp văn bản có nội dung bạn muốn ẩn nếu chúng tràn ra bên ngoài phần tử. Bạn có thể sử dụng mã sau để tạo hộp này:

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "hidden".</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: hidden;
}

Mã của chúng tôi trả về:

[Code result here]


Không giống như trong các ví dụ trước của chúng tôi, văn bản tràn từ hộp của chúng tôi bị ẩn khỏi người dùng. Điều này là do chúng tôi đặt giá trị của thuộc tính tràn thành hidden trong mã của chúng tôi.

tràn-x và tràn-y

Các thuộc tính tràn-x và tràn-y cho phép bạn thay đổi cách xử lý nội dung tràn trên từng trục riêng lẻ.

Thuộc tính tràn-x chỉ định cách xử lý phần tràn ở các cạnh bên trái và bên phải của hộp và thuộc tính tràn-y chỉ định cách xử lý phần tràn ở các cạnh trên và dưới của hộp.

Giả sử bạn đang thiết kế một hộp và bạn muốn đặt hai giá trị tràn khác nhau cho trục x và y. Trục x nên sử dụng hidden giá trị tràn và trục y nên sử dụng scroll giá trị tràn. Bạn có thể sử dụng mã sau để thực hiện nhiệm vụ này:

index.html

<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS x-overflow and y-overflow properties to set overflow values for the individual axes in a web element.</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow-x: hidden;
	overflow-y: vertical;
}

Mã của chúng tôi trả về:

[Code result here]


Như bạn thấy, hộp của chúng ta không có thanh cuộn ngang. Điều này là do chúng tôi đặt giá trị của tràn-x thành "ẩn". Tuy nhiên, hộp của chúng tôi có một thanh cuộn dọc, thanh này xuất hiện vì chúng tôi đặt giá trị của tràn-y thành “scroll”.

Kết luận

Thuộc tính phần bổ sung CSS chỉ định cách nội dung của phần tử sẽ xuất hiện nếu nội dung của phần tử quá lớn để vừa với khu vực được chỉ định trên trang web.

Hướng dẫn này đã khám phá, với tham chiếu đến một số ví dụ, cách sử dụng thuộc tính CSS tràn và bốn giá trị của nó để kiểm soát tràn trong các phần tử web. Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng thuộc tính bổ sung CSS như một nhà phát triển chuyên nghiệp.