<!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;
}