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 W88
link
Kubet88fun Ku casino KUBET Casino ku bet ae888 Ku casino kucasino.dev cfun68 kubet W88

*