14-overflow.html

<!doctype html>
<!-- doctype informa ao agente de usuario a versão do html que deve ser renderizada-->
<html lang="pt-br">
    <head>
        <title> pagina de exemplo estrutura basica </title>
        <meta charset="utf-8">
        <meta name="author" content="Daniel">
        <meta name="description" content="descrição bacanuda">
        <meta name="keywords" content="html5, tecnologia">
        
        <style>
            
            div {
                padding: 2%;
                margin: 2%;
                border: 1px solid black;
                width: 17%;
                display:  inline-block;
                height: 100px;
                font-family: sans-serif;
                font-size: 18px;
            }
            
            .div1 {
                overflow: visible;
            }
            .div2 {
                overflow: hidden;
            }
            .div3 {
                overflow: scroll;
            }
            .div4 {
                overflow: auto;
            }
        </style>
    </head>
    <body>
        
        <div class="div1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis excepturi, ducimus officia! Earum dicta provident dolor fuga rem, nisi ullam veniam cumque, repudiandae eligendi dignissimos accusamus ratione vero. Corrupti, impedit?</p>
        </div>
        
        <div class="div2">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis excepturi, ducimus officia! Earum dicta provident dolor fuga rem, nisi ullam veniam cumque, repudiandae eligendi dignissimos accusamus ratione vero. Corrupti, impedit?</p>
        </div>
        
        <div class="div3">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        </div>
        
        <div class="div4">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        </div>
        
    </body>
</html>