CSS处理内容溢出-CSDN博客

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>处理内容溢出</title>
    <style>
        #d1{
            width: 400px;
            height: 300px;
            background-color: aqua;
            /* overflow: hidden; */
        }
        #d2{
            width: 1000px;
            height: auto;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="d1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi atque praesentium delectus ullam, illo incidunt
        quam ex cupiditate ab consequuntur dolor natus. Pariatur quia perferendis, rerum quos corporis est, voluptate
        nostrum maiores iusto tempora sequi culpa praesentium doloremque, itaque aliquid aspernatur eligendi
        <div id="d2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt eligendi optio repellat a totam at pariatur
            quod ea eveniet mollitia saepe rem, maiores perspiciatis, cumque dolores repellendus corporis iste iusto
            inventore explicabo asperiores! Hic quisquam laborum similique at ratione quibusdam sequi sapiente ex beatae
            eos debitis molestias, dolore, ducimus maiores!</div>
        perspiciatis possimus magni eius atque. Officia doloribus molestias consectetur explicabo ab nemo exercitationem
        magnam voluptates, ea eveniet provident adipisci asperiores voluptatem fugit laborum ad. Suscipit cum nemo,
        autem fuga est nobis esse quaerat tenetur sequi, blanditiis adipisci? Repudiandae molestiae in eum, tempora
        dolorem hic velit. Assumenda distinctio sed ut architecto vel iste deleniti rem nemo, ducimus modi accusamus!
    </div>
</body>

</html>

overflow加入这个属性后，溢出的内容就会消失如下

overflow-x

水平方向溢出内容的处理方式

overflow-y

垂直方向溢出内容给的处理方

 #d1{
            width: 400px;
            height: 300px;
            background-color: aqua;
            overflow-x: auto;
            overflow-y: auto;
        }