{"id":20226,"date":"2013-11-02T13:47:00","date_gmt":"2013-11-02T13:47:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/11\/02\/thuoc-tinh-overflow-trong-css\/"},"modified":"2022-07-31T18:51:49","modified_gmt":"2022-07-31T11:51:49","slug":"thuoc-tinh-overflow-trong-css","status":"publish","type":"post","link":"https:\/\/kiencang.net\/thuoc-tinh-overflow-trong-css\/","title":{"rendered":"Thu\u1ed9c t\u00ednh overflow trong CSS"},"content":{"rendered":"\n
Thu\u1ed9c t\u00ednh overflow d\u00f9ng \u0111\u1ec3 quy \u0111\u1ecbnh c\u00e1ch th\u1ee9c hi\u1ec3n th\u1ecb khi k\u00edch th\u01b0\u1edbc n\u1ed9i dung l\u1edbn h\u01a1n k\u00edch th\u01b0\u1edbc box ch\u1ee9a n\u1ed9i dung \u0111\u00f3. C\u00f3 4 gi\u00e1 tr\u1ecb hay d\u00f9ng c\u1ee7a overflow.<\/p>\n\n\n\n
overflow: visible<\/strong><\/p>\n\n\n\n \u0110\u00e2y l\u00e0 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh, theo \u0111\u00f3 n\u1ebfu n\u1ed9i dung l\u1edbn h\u01a1n box th\u00ec n\u00f3 s\u1ebd tr\u00e0n ra ngo\u00e0i box, d\u0129 nhi\u00ean tr\u00f4ng n\u00f3 r\u1ea5t x\u1ea5u, v\u00e0 trong thi\u1ebft k\u1ebf, \u0111a s\u1ed1 tr\u01b0\u1eddng h\u1ee3p ta kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p \u0111\u1ec3 nh\u01b0 v\u1eady. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 minh h\u1ecda c\u1ee5 th\u1ec3 khi n\u1ed9i dung tr\u00e0n ra ngo\u00e0i:<\/p>\n\n\n\n overflow: hidden<\/strong><\/p>\n\n\n\n Gi\u00e1 tr\u1ecb n\u00e0y s\u1ebd l\u00e0m cho n\u1ed9i dung th\u1eeba b\u1ecb \u1ea9n \u0111i ch\u1ee9 kh\u00f4ng tr\u00e0n ra kh\u1ecfi box n\u1eefa. V\u00ed d\u1ee5:<\/p>\n\n\n\n overflow: scroll<\/strong><\/p>\n\n\n\n R\u00f5 r\u00e0ng l\u00e0 b\u1ea1n kh\u00f4ng th\u1ec3 \u0111\u1ecdc \u0111\u01b0\u1ee3c n\u1ed9i dung d\u01b0 ra, v\u00e0 n\u00f3 kh\u00f4ng t\u1ed1t ch\u00fat n\u00e0o v\u1ec1 m\u1eb7t cung c\u1ea5p th\u00f4ng tin, \u0111\u1ec3 kh\u1eafc ph\u1ee5c \u0111i\u1ec1u n\u00e0y ta s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh overflow:scroll; <\/em>N\u00f3 s\u1ebd l\u00e0m xu\u1ea5t hi\u1ec7n thanh cu\u1ed9n d\u1ecdc ho\u1eb7c ngang, ho\u1eb7c c\u1ea3 hai \u0111\u1ec3 gi\u00fap \u0111\u1ed9c gi\u1ea3 xem n\u1ed9i dung b\u1ecb \u1ea9n.<\/p>\n\n\n\n overflow: auto<\/strong><\/p>\n\n\n\n Ti\u1ebfp theo l\u00e0 gi\u00e1 tr\u1ecb auto. <\/em>Code m\u1eabu: overflow:auto; <\/em>V\u1edbi khai b\u00e1o l\u00e0 auto, thanh cu\u1ed9n ch\u1ec9 xu\u1ea5t hi\u1ec7n khi n\u1ed9i dung l\u1edbn h\u01a1n box, c\u00f2n n\u1ebfu kh\u00f4ng l\u1edbn h\u01a1n th\u00ec kh\u00f4ng xu\u1ea5t hi\u1ec7n. C\u00e1i n\u00e0y l\u00e0 kh\u00e1c v\u1edbi scroll, khi s\u1eed d\u1ee5ng scroll ngay c\u1ea3 khi n\u1ed9i dung kh\u00f4ng l\u1edbn h\u01a1n box th\u00ec v\u1eabn xu\u1ea5t hi\u1ec7n thanh ngang v\u00e0 d\u1ecdc.<\/p>\n\n\n\n N\u1ebfu mu\u1ed1n \u0111i\u1ec1u ch\u1ec9nh cu\u1ed9n ngang ho\u1eb7c d\u1ecdc ri\u00eang bi\u1ec7t, b\u1ea1n ch\u1ec9 th\u1ecb c\u1ee5 th\u1ec3 thanh cu\u1ed9n n\u00e0o mu\u1ed1n t\u00e1c \u0111\u1ed9ng, n\u1ebfu l\u00e0 thanh cu\u1ed9n ngang, s\u1eed d\u1ee5ng overflow-x <\/em>c\u00f2n thanh cu\u1ed9n d\u1ecdc s\u1eed d\u1ee5ng overflow-y<\/em><\/p>\n\n\n\n T\u1ed5ng h\u1ee3p ng\u1eafn g\u1ecdn l\u1ea1i n\u1ed9i dung \u1edf ph\u1ea7n \u0111\u1ea7u, c\u00e1c gi\u00e1 tr\u1ecb c\u00f3 th\u1ec3 c\u1ee7a overfow l\u00e0:<\/p>\n\n\n\n Nh\u1eafc th\u00eam v\u1ec1 inherit, n\u1ebfu th\u1ebb A n\u00e0o \u0111\u00f3 nh\u1eadn gi\u00e1 tr\u1ecb inherit, n\u00f3 s\u1ebd th\u1eeba k\u1ebf gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh overflow t\u1eeb th\u1ebb cha, ch\u1eb3ng h\u1ea1n th\u1ebb cha l\u00e0 scroll th\u00ec th\u1ebb con A c\u0169ng scroll. Nh\u1eefng th\u1ebb con kh\u00e1c (B, C,..) th\u00ec kh\u00f4ng nh\u1eadn gi\u00e1 tr\u1ecb scroll v\u00ec overflow kh\u00f4ng k\u1ebf th\u1eeba t\u1ef1 \u0111\u1ed9ng nh\u01b0 \u1edf ph\u1ea7n th\u00f4ng s\u1ed1 k\u1ef9 thu\u1eadt c\u00f3 n\u00f3i \u0111\u1ebfn.<\/p>\n","protected":false},"excerpt":{"rendered":" Thu\u1ed9c t\u00ednh overflow d\u00f9ng \u0111\u1ec3 quy \u0111\u1ecbnh c\u00e1ch th\u1ee9c hi\u1ec3n th\u1ecb khi k\u00edch th\u01b0\u1edbc n\u1ed9i dung l\u1edbn h\u01a1n k\u00edch th\u01b0\u1edbc box ch\u1ee9a n\u1ed9i dung \u0111\u00f3. C\u00f3 4 gi\u00e1 tr\u1ecb hay d\u00f9ng c\u1ee7a overflow. overflow: visible \u0110\u00e2y l\u00e0 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh, theo \u0111\u00f3 n\u1ebfu n\u1ed9i dung l\u1edbn h\u01a1n box th\u00ec n\u00f3 s\u1ebd tr\u00e0n ra ngo\u00e0i …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\n
\n\n\n\nThanh cu\u1ed9n ngang v\u00e0 thanh cu\u1ed9n d\u1ecdc<\/h2>\n\n\n\n
\n\n\n\nC\u00e1c th\u00f4ng s\u1ed1 k\u1ef9 thu\u1eadt<\/h2>\n\n\n\n
\n\n\n\nC\u00e1c gi\u00e1 tr\u1ecb c\u00f3 th\u1ec3 c\u1ee7a thu\u1ed9c t\u00ednh<\/h2>\n\n\n\n