CSS 宽高溢出三种处理方式

​x
 
<!DOCTYPE html>
<html>
    <head>
        <title>宽高溢出</title>
        <style type="text/css">
            div {
                border: 2px solid red;
                width: 200px;
                height: 80px;
            }
            .div3 {
                color: green;
                overflow: scroll;
            }
            #div2 {
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <!-- 文字宽高溢出
          - 默认文字继续往下显示 -->
        <div class="div1">
            这是用来测试的<br>
            你好,你好,你好,你好,你好,你好,你好,你好,你好,你好,你好,你好,你好,你好,你好,
        </div>
        <br>
        <div id="div2">
            溢出部分会被剪切，不显示<br>
            你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，        
        </div>
        <br>
        <div class="div3">
            溢出部分会添加滚动条显示<br>
            你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，你好，hello，测试，                
        </div>
    </body>
</html>
HTML