HƯỚNG DẪN VÀ VÍ DỤ CSS OVERFLOW
Chắc hẳn ai học tập lập trình web cũng đã từng gặp mặt một khó khăn đó là lúc nội dung của một phần tử như thế nào đóquá phệ so với kích thước của phần tử thìphần ngôn từ đó sẽbị tràn ra khỏi quanh vùng được hướng dẫn và chỉ định cho phần tử đó. Vậy đểkhắc phục khó khăn đó như vậy nào?
Trong CSS tất cả thuộc tính overflowcho phép mình tự khắc phục trở ngại trên bằng cáchcắt đi phần văn bản bị trànhoặcthêm thanh cuộn cho phần tử đó.
Bạn đang xem: Hướng dẫn và ví dụ css overflow
Thuộc tính overflow có không ít giá trị, tuy nhiên trong bài học kinh nghiệm này bản thân sẽ khám phá 4 giá trị chủ yếu của ở trong tínhoverflow đó làvisible, hidden, scroll, auto.
1. Những giá trị của overflow
visible
Khi trực thuộc tính overflow cógiá trị là visible thì phần nộidung bị tràn không trở nên cắt đi và câu chữ bị tràn ra đang ghi đè lên trên các bộ phận khác.
Bài viết này được đăng tại
Bấm vào RUN nhằm xem công dụng nhé. :)
lấy một ví dụ RUN
div.overflow background-color: gray;width: 300px;height: 50px;border: 1px solid black;overflow: visible;
Và hiệu quả của lấy ví dụ trên:
hidden
Khi trực thuộc tính overflow có mức giá trị làhidden thìphần nội dung bị tràn ra bị cắt đi vàphần nội dung đó 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 lấy một ví dụ trên:
scroll
Khi nằm trong tính overflow có giá trị làscroll thì phần nội dung bị tràn ra vẫn bị giảm đi, tuy nhiên trình duyệt sẽ sở hữu được thêm thanh scroll, mình rất có thể kéoxem phần nội dung bị ẩn đi. Thanh scroll này đạt thêm vào cho cả chiều dọc cùng chiều ngang của phần tử.
lấy ví dụ RUN
div.overflow background-color: gray;width: 300px;height: 50px;border: 1px solid black;overflow: scroll;
Và kết quả của ví dụ như trên:
auto
Khi ở trong tính overflowcó quý giá làauto thì cũng tương tự như nhưgiá trị scroll, mặc dù thanh scroll sẽ tiến hành thêm vàokhi đề xuất thiết.
Xem thêm: Giới Trẻ Mỹ Mở Trend Bình Chọn Top 10 Giọng Hát Cao & Hay Nhất Thế Giới Hiện Nay
ví dụ RUN
div.overflow background-color: gray; width: 300px; height: 50px; border: 1px solid black;
Và kết quả của ví dụ như trên:
Như vậy là mình đã tìm hiểu ngừng các giá chỉ trị chủ yếu của nằm trong tính overflow chính là visible, hidden, scroll, auto. Trong CSS có thêm 2 thuộc tính overflow-x với overflow-y cho phép điều khiển văn bản bị tràn theo theo hướng dọc hoặc theo chiều ngang. Chúng ta cùng xem tiếp nội dung tiếp theo nhé.
2. Overflow-x
overflow-x là trực thuộc tính cho phép điều khiển 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 tự trực thuộc tính overflow, ở trong tínhoverflow-x cũng có thể có giá trị như visible, hidden, auto, scroll.
Mình đang lấy ví dụ cho thuộc tính overflow-xsau khi khám phá thuộc tính overflow-y luôn nhé.
3. Overflow-y
overflow-y là thuộc tính cho phép điều khiển ngôn từ bị tràn theo chiều dọc củ (nghĩa là trên (top) và bên dưới (bottom) của phần tử).Tương tự nằm trong tính overflow, trực thuộc tính overflow-ycũng có giá trị như visible, hidden, auto, scroll.
Mình sẽ lấy ví dụ đến 2 trực thuộc tính overflow-x với overflow-y 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ụ như trên:
4. Lời kết
Như vậy là tôi đã trình bày dứt 4 giá trị bao gồm của trực thuộc tính overflow chính là visible, hidden, scroll, auto. Dường như còn có 2 nằm trong tính overflow-x và overflow-y có thể chấp nhận được điều khiển nội dung bị tràn theo chiều ngang hoặc chiềudọc. Những giá trị visible, hidden, scroll, tự động hóa của nằm trong tính overflow, overflow-x, overflow-y khi nào nên sử dụng thì còn tùy ở trong vào mục đích sử dụng của những bạn. :)
Cuối cùng, trong quy trình viết không tránh ngoài sai sót, nếu bao gồm điều gì không phải chăng rất ao ước nhận được sự góp ý chân thành của chúng ta để cho bài viết của bản thân ngày một giỏi hơn.
Xem thêm: Điều Chế Hidro Trong Công Nghiệp, Phản Ứng Thế Là Gì
Cám ơn các bạn đã đọc bài xích viết.Chúc các bạn vận dụng tốt.
Tham khảo: w3school.com
bài bác trước bài xích tiếp
Validate form bởi HTML5
Trước đây họ hay validate form bởi Javascript, tuy thế ...
Thẻ aside vào HTML5
tôi cũng không rõ bạn ta tạo thành thẻ này có tác dụng gì, tuy vậy nếu xét…
Thẻ hgroup vào HTML5
hgroup là 1 thẻ được thêm vào kể từ phiên phiên bản ...
Thẻ header vào HTML5
Nếu nhìn qua một trang web được xây dựng bởi HTML5 thì bạn ...
những thẻ HTML tạo nên form tích lũy dữ liệu
Trước khi bước đầu thì bạn phải hiểu quan niệm form tài liệu là ...
tạo ra background và con đường viền mang đến thẻ HTML
Để tạo thành màu nền cho một thẻ HTML bất cứ thì ta áp dụng thuộc…
sinh sản menu một cấp bằng HTML đơn giản và dễ dàng
Để làm menu 1 cung cấp thì có rất nhiều giải pháp. Bạn có thể sử…
chế tạo ra HTML danh sách bài viết đơn giản
mục đích mình đưa ra bài bác tập này là giúp các bạn hiểu được cách…
Tạo bửa cục layout HTML đơn giản dễ dàng
Qua bài học kinh nghiệm này các bạn sẽ biết bí quyết tạo một file style riêng để ..
biệt lập ID và Class vào HTML
từng thẻ HTML đều phải sở hữu những nằm trong tính riêng với khác nhau. Mặc dù nhiền ..
giải pháp dùng thẻ div vào HTML để tạo những khối giao diện
Thẻ div đóng vai trò cực kỳ quan trọng, nó được dùng làm tạo ...
phân minh thẻ HTML Block với Inline
Có lúc nào bạn thắc mắc rằng, lý do nội dung ...
thuộc tính style trong HTML
Do họ chưa học CSS cần mình sẽ không nói ...
Thẻ title vào HTML
Cách sử dụng thẻ title html ...
Thẻ style vào HTML
Style là một trong những thẻ HTML bình thường, nó có tính năng là xác ...
Thẻ base vào HTML
Cách thực hiện thẻ base vào html ...
Thẻ links trong HTML
Cách sử dụng thẻ html ...
Thẻ meta trong HTML
Cách áp dụng thẻ meta html ...
Thẻ script vào HTML
Cách thực hiện thẻ script html ...
Thẻ noscript vào HTML
Cách sử dụng thẻ noscript html ...
WORDPRESS
HTML Templates
Theme WordPress
Plugin WordPress
xây dựng WordPress
mẹo nhỏ WordPress
WEB HOSTING
quản ngại trị Linux
thủ thuật Hosting
kiến thức và kỹ năng Domain
WEB FRONTEND
Javascript
AngularJS
jQuery
jQuery thiết bị di động
HTML & CSS
Bootstrap
TypeScript
SASS CSS
VueJS
NestJS
học tập ReactJS
WEB BACKEND
PHP
Codeigniter
Laravel
Phalcon
OpenCart
NodeJS
Blogspot
DATABASE
học tập MySQL
học MongoDB
database căn phiên bản
học tập Oracle
học SQL hệ thống
học tập SQLite
PROGRAMMING
Python
Java
Pascal
học tập C#
học tập Ruby
học Swift
C / C++
Kotlin
Golang
giải mã
Visual Basic
MOBILE DEV
React Native
Học tiện ích ios
android
CÔNG CỤ
học Git
Testing
Control Panel
Dev Tool
FFmpeg
TIN HỌC
Excel
Word
PowerPoint
Access
Photoshop
MÔN HỌC
giờ đồng hồ Anh
Toán
giờ đồng hồ Nhật
Văn học
VIDEO
CSS Lab
PHP Lab
ra mắt
ra mắt Liên hệ chính sách Điều khoản
link
Thủ thuật download Game Ứng dụng Tin học Môn học tập
link hay
tải app 567 live show
Trang chủ chủ yếu thứcThabet
ĐK THABET nhận ngay 628k
kubet W88link
Kubet88fun Ku casino KUBET Casino ku bet ae888 Ku casino kucasino.dev cfun68 kubet W88
