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.dev
liên kết
kèo nhà dòng KUBET88 f8bet Kubet88fun Ku casino KUBET Casino ae888 Ku casino cfun68

*