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