CSS Агуулгын хальж гаралт

Элементийн агуулга (текст/зураг) нь өөрийн зааж өгсөн өндөр эсвэл өргөнөөс хэтэрч халих үед overflow шинж чанараар тохируулна.

overflow: visible; — анхдагч утга, хальсан агуулга хүрээний гадуур шууд ил харагдана.
overflow: hidden; — хальж гарсан илүүдэл агуулгыг таслан нууна.
overflow: scroll; — хальсан эсэхээс үл хамааран үргэлж скролл баар гаргана.
overflow: auto; — зөвхөн агуулга хальсан үед л автоматаар скролл баар гаргана (хамгийн хэрэглээтэй нь).

Жишээ

<!DOCTYPE html>
<html>
<head>
<style>
.box {
    width: 200px;
    height: 80px;
    border: 1px solid #94a3b8;
    overflow: auto;
}
</style>
</head>
<body>
<div class="box">
    Энэ хайрцгийн өндөр 80px тул удаан текст автоматаар доторх скролл баараар гарна. Энд илүү их текст нэмж, скролл ажиллаж байгааг шалгаж үзээрэй.
</div>
</body>
</html>

Туршиж үзэх »