css overflow Nedir? Nasıl Kullanılır?

css overflow özelliği, Html elemanının boyutlandırılmış alanına sığmayan içeriğin taşma özellikleri belirlemek için kullanılır.

Aldığı parametreler :
visible : Taşan kısımlarda görünür. (Varsayılan)
hidden : Taşan kısımlar gizler.
scroll : Taşan kısımlarda olduğunda kaydırma çubuğu çıkar.
auto : Otomatik değer alır. Taşan kısım yoksa kaydırma çubuğu çıkmaz taşan olursa çıkar.
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.

Örnek:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div { 
            width: 300px;
            height: 100px;
            border: 1px solid grey;
            margin-bottom:30px;
         }
        .one   { overflow: visible; }
        .two   { overflow: hidden; }  
        .three { overflow: scroll; } 
        .four  { overflow: auto; } 
        .five  { overflow: initial; }   
        .six   { overflow: auto; } 
        .six-child { overflow: inherit; } 
    </style>
<body>
    <div class="one">        
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, commodi. Non id officia temporibus soluta eveniet tempora culpa neque quod iste voluptas ea consequuntur laboriosam vero repellat voluptate quibusdam molestias, iure quis at?
    </div> 
    <div class="two">        
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque officia possimus similique, quo, magnam eos doloribus nobis, esse pariatur sapiente voluptatem sed. Aliquid ipsam asperiores, eveniet laudantium dolores laborum ab autem nostrum distinctio!    
    </div> 
    <div class="three">        
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad fuga voluptatem vero explicabo hic aliquam placeat sed obcaecati optio inventore suscipit provident ratione beatae quis numquam a porro deserunt, debitis omnis esse ullam.   
    </div> 
    <div class="four">        
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur, voluptates obcaecati eveniet amet ab dolore eius magni voluptatem sequi illum tenetur nam at repellendus totam nulla ipsa ratione atque magnam autem? Ullam, consequatur.  
    </div>
    <div class="five">        
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, nam, tempora sed qui ratione possimus earum repudiandae maxime sapiente pariatur eaque, amet illum blanditiis cumque sunt temporibus ducimus. Minus exercitationem rem odit culpa.  
    </div> 
    <div class="six">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores laudantium earum quod qui ipsa ad mollitia, vel ipsum fuga unde consectetur modi a placeat officia ab labore enim, provident ducimus vitae. Veritatis, explicabo.
        <div class="six-child">
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos distinctio molestias doloremque omnis corporis. Saepe soluta quis, quas mollitia incidunt obcaecati sint deleniti aliquam culpa. Impedit illo quos cupiditate debitis est ab eos.
        </div>
    </div>
</body>
</html>

Html çıktısı:

css overflow

css overflow-x Kullanımı

overflow-x özelliği, Html elemanının boyutlandırılmış alanında x ekseninde sığmayan içeriğin taşma özellikleri belirler.

Aldığı parametreler overflow özelliği ile aynıdır.

Örnek:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div { 
            width: 200px;
            height: 100px;
            border: 2px solid grey;
            margin-bottom:10px;
            
         }
         div[class*=-child]{
            width: 300px;
            height: 50px;
            background-color: rgba(255, 255, 129, 0.537);
         }
        .one   { overflow-x: visible; }
        .two   { overflow-x: hidden; }  
        .three { overflow-x: scroll; } 
        .four  { overflow-x: auto; } 
        .five  { overflow-x: initial; }   
    </style>
<body>
    <div class="one">        
        <div class="one-child"></div>
    </div> 
    <div class="two">        
        <div class="one-child"></div>      
    </div> 
    <div class="three">        
        <div class="one-child"></div> 
    </div> 
    <div class="four">        
        <div class="one-child"></div> 
    </div>
    <div class="five">        
        <div class="one-child"></div> 
    </div>    
</body>
</html>

Html çıktısı:

css overflow-y Kullanımı

overflow-y özelliği, Html elemanının boyutlandırılmış alanına y ekseninde sığmayan içeriğin taşma özellikleri belirlemek için kullanılır.

Aldığı parametreler overflow özelliği ile aynıdır.

Örnek:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div { 
            width: 300px;
            height: 80px;
            border: 1px solid grey;
            margin-top:40px;
         }
        .one   { overflow-y: visible; }
        .two   { overflow-y: hidden; }  
        .three { overflow-y: scroll; } 
        .four  { overflow-y: auto; } 
        .five  { overflow-y: initial; }   
        
    </style>
<body>
    <div class="one">        
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad molestias optio cupiditate rerum illum laudantium iure exercitationem quo distinctio inventore hic nulla, accusamus quos minima error iste harum assumenda dolorum.
    </div> 
    <div class="two">        
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad molestias optio cupiditate rerum illum laudantium iure exercitationem quo distinctio inventore hic nulla, accusamus quos minima error iste harum assumenda dolorum.
    </div> 
    <div class="three">        
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad molestias optio cupiditate rerum illum laudantium iure exercitationem quo distinctio inventore hic nulla, accusamus quos minima error iste harum assumenda dolorum.
    </div> 
    <div class="four">        
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad molestias optio cupiditate rerum illum laudantium iure exercitationem quo distinctio inventore hic nulla, accusamus quos minima error iste harum assumenda dolorum.
    </div>
    <div class="five">        
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad molestias optio cupiditate rerum illum laudantium iure exercitationem quo distinctio inventore hic nulla, accusamus quos minima error iste harum assumenda dolorum.
    </div>    
</body>
</html>

Html çıktısı:

css overflow-y

overflow-wrap Kullanımı

overflow-wrap özelliği, elemanın boyutları içerisine sığmayan yazının kırılıp kırılmayacağını belirlemek amacıyla kullanırız.

Aldığı parametreler :
normal : Normal değer.
break-word : Kelime kır
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.

Örnek:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div { 
            width: 200px;
            height: 50px;
            border: 1px solid grey;
            margin-top:20px;
         }
        .one   { overflow-wrap: normal; }
        .two   { overflow-wrap: break-word; }  
        .three { overflow-wrap: initial; }         
    </style>
<body>
    <div class="one">        
       tasarımveyazılım!tasarımveyazılım!tasarımveyazılım!
    </div> 
    <div class="two">        
        tasarımveyazılım!tasarımveyazılım!tasarımveyazılım!
    </div> 
    <div class="three">        
        tasarımveyazılım!tasarımveyazılım!tasarımveyazılım!
    </div> 
</body>
</html>

Html çıktısı:

css overflow-wrap

Başka bir yazımızda görüşmek üzere…

Leave a Reply