Nghĩa của từ overflow

Chắc hẳn ai học lập trình sẵn website cũng đã từng có lần chạm mặt một khó khăn đó là khi ngôn từ của 1 phần tử làm sao đóquá to so với size của phần tử thìphần văn bản đó sẽbị tràn thoát ra khỏi Khu Vực được chỉ định cho thành phần đó. Vậy đểkhắc chế khó khăn đó như vậy nào?

Trong CSS bao gồm nằm trong tính overflowchất nhận được bản thân hạn chế khó khăn trên bởi cáchcắt đi phần câu chữ bị trànhoặcthêm tkhô giòn cuộn cho thành phần đó.

Bạn đang xem: Nghĩa của từ overflow

Thuộc tính overflow có tương đối nhiều giá trị, mặc dù trong bài học này mình vẫn mày mò 4 quý hiếm thiết yếu của trực thuộc tínhoverflow đó làvisible, hidden, scroll, auto.

1. Các giá trị của overflow

visible

lúc nằm trong tính overflow cócực hiếm là visible thì phần nộidung bị tràn không biến thành cắt đi và văn bản bị tràn ra đã ghi đè lên trên các phần tử không giống.

Bài viết được đăng trên mammasfigata.com

Bấm vào RUN để xem công dụng nhé. :)


lấy ví dụ như RUN

div.overflow background-color: gray;width: 300px;height: 50px;border: 1px solid black;overflow: visible;
Và công dụng của ví dụ trên:

hidden

lúc ở trong tính overflow có giá trị làhidden thìphần câu chữ bị tràn ra bị giảm đi vàphần ngôn từ đó có khả năng sẽ bị ẩn đi.


ví dụ như RUN

div.overflow background-color: gray;width: 300px;height: 50px;border: 1px solid black;overflow: hidden;
Và hiệu quả của ví dụ trên:

scroll

khi nằm trong tính overflow có mức giá trị làscroll thì phần văn bản bị tràn ra vẫn bị cắt đi, tuy vậy trình coi ngó sẽ có được thêm tkhô nóng scroll, bản thân có thể kéoxem phần câu chữ bị ẩn đi. Tkhô nóng scroll này được sản xuất cho tất cả chiều dọc củ với chiều ngang của thành phần.


lấy một ví dụ RUN

div.overflow background-color: gray;width: 300px;height: 50px;border: 1px solid black;overflow: scroll;
Và công dụng của ví dụ trên:

auto

lúc thuộc tính overflowcó giá trị làtự động thì cũng tương tự nhưcực hiếm scroll, mặc dù thanh hao scroll sẽ tiến hành thêm vàokhi cần thiết.


Ví dụ RUN

div.overflow background-color: gray; width: 300px; height: 50px; border: 1px solid black;
Và tác dụng của ví dụ trên:

vì thế là tôi đã tìm hiểu xong xuôi những quý hiếm bao gồm của trực thuộc tính overflow đó là visible, hidden, scroll, auto. Trong CSS bao gồm thêm 2 trực thuộc tính overflow-x và overflow-y có thể chấp nhận được điều khiển ngôn từ bị tràn theo chiều dọc hoặc theo chiều ngang. Chúng ta cùng xem tiếp câu chữ tiếp theo sau nhé.

2. overflow-x

overflow-x là thuộc tính được cho phép tinh chỉnh câu chữ bị tràn theo chiều ngang (nghĩa là phía bên trái (left) và bên phải (right) của phần tử).Tương trường đoản cú ở trong tính overflow, ở trong tínhoverflow-x cũng có thể có quý hiếm nlỗi visible, hidden, auto, scroll.

Xem thêm: Cách Làm Việc Nhóm Hiệu Quả ? Làm Việc Nhóm Hiệu Quả Với 4 Lưu Ý Sau Đây!

Mình đang mang ví dụ mang lại ở trong tính overflow-xsau khi tò mò ở trong tính overflow-y luôn nhé.

3. overflow-y

overflow-y là thuộc tính cho phép tinh chỉnh ngôn từ bị tràn theo chiều dọc củ (tức thị trên (top) và dưới (bottom) của phần tử).Tương từ bỏ trực thuộc tính overflow, trực thuộc tính overflow-ycũng có quý hiếm nhỏng visible, hidden, tự động hóa, scroll.

Mình vẫn lấy ví dụ mang đến 2 trực thuộc tính overflow-x cùng overflow-y hệt như sau:


lấy ví dụ RUN

div background-color: yellow;width: 200px;height: 50px;border: 1px solid black;overflow-x: hidden; overflow-y: scroll;
Và kết quả của ví dụ trên:

4. Lời kết

bởi vậy là tôi đã trình bày dứt 4 quý giá chủ yếu của nằm trong tính overflow đó là visible, hidden, scroll, tự động. Dường như còn có 2 trực thuộc tính overflow-x với overflow-y cho phép tinh chỉnh văn bản bị tràn theo hướng ngang hoặc chiềudọc. Các cực hiếm visible, hidden, scroll, tự động của nằm trong tính overflow, overflow-x, overflow-y lúc nào đề nghị thực hiện thì còn tùy trực thuộc vào mục tiêu áp dụng của các bạn. :)

Cuối thuộc, vào quá trình viết ko tránh khỏi không đúng sót, nếu tất cả điều gì không hợp lý và phải chăng hết sức mong muốn nhận thấy sự góp ý thật tình của chúng ta khiến cho nội dung bài viết của chính mình ngày 1 xuất sắc hơn.

Cám ơn chúng ta đang gọi nội dung bài viết.Chúc các bạn vận dụng tốt.

Tham khảo: w3school.com

Bình luận đang đóng, trường hợp bao gồm vướng mắc hãy đặt thắc mắc tại hoicode.com để admin trả lời.


Bài sau Bài tiếp
Chuim đề học xây dựng web: Học phần HTML / CSS

Đây là chương thơm trước tiên vào chăm đề tự học xây dựng website với PHP. Trong chương này bọn họ sẽ học tập HTML với CSS trước.

Các bạn hãy sub kênh nhằm ủng hộ mình nhé. Link siêng đêtrên phía trên.

Xem thêm: Cách Phối Đồ Nam Mùa Đông 2018 Không Thể Bỏ Qua, Gợi Ý Phối Đồ Mùa Đông Cho Chàng (Phần 1)


DANH SÁCH BÀI HỌC


Căn uống bản Nâng cao Tmê mệt khảo
Danh sách chủ thể
MÃ GIẢM GIÁ
Unica 50% Lấy Mã
TinoHost 30% Lấy Mã
INET 30% Lấy Mã

Liên hệ


Mã bớt giá


Khóa học


Giới thiệu


Admin Cường, cai quản chủ yếu của website.

20trăng tròn - mammasfigata.com. All Right Reserved Theme GoodNews, nền tảng Codeigniter, VPS download trên Tinohost
*


BÀI VIẾT


Nếu bạn vạc hiện lỗi không nên links, ngôn từ không đúng, hay một lỗi bất kỳ làm sao đó bên trên trang này thì hãy cho khách hàng biết nhé. Cám ơn bạn!


Chuyên mục: Kiến thức