显示与溢出 详细介绍

爱无路，恨无情。相思无缘，相爱无份。曾相识，恨离别。无风雨，无同舟，何结果。情远天边，心无挂碍，唯爱你独一。

显示与溢出的几种可能

css样式

        div {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }

        .container {  
            overflow: auto;
            /* 
            内容溢出：内容显示的区域大于当前元素的区域
            * overflow属性设置内容溢出情况的处理方式
              * visible：（默认值）表示显示
              * hidden：表示溢出部分全部隐藏
              * scroll：提供一个滚动条（不管内容是否溢出）
              * auto：由浏览器决定(水平滚动 垂直滚动)
                *  如果内容没有溢出的情况，不做任何处理
                *  如果内容有溢出的情况，提供一个滚动条
             */
        }

        .child {
            width: 300px;
            height: 300px;
            background-color: tomato;
        }

        .text1 {
            overflow: visible;
        }

        .text2 {
            overflow: hidden;
        }

        .text3 {
            overflow: scroll;
        }

        .text4 {
            overflow: scroll;
        }

html内容

    <!-- 内容溢出：文本内容、图片、视频以及子级元素 -->
    <div class="container">
        Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, 
        red lips and supple knees; it is a matter of the will, a quality of the imagination, 
        a vigor of the emotions; it is the freshness of the deep springs of life.Youth means 
        a temperamental predominance of courage over timidity, of the appetite for adventure 
        over the love of ease. This often exists in a man of 60 more than a boy of 20. Nobody 
        grows old merely by a number of years. We grow old by deserting our ideals.

    </div>
     <div class="container"> 
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3347358525,1745600819&fm=26&gp=0.jpg">
    </div> 
    <div class="container">
        <div class="child"></div>
    </div>

    <div class="text1">
        Whether 60 or 16, there is in every human being’s heart the lure of wonders, the 
        unfailing appetite for what’s next and the joy of the game of living. In the center 
        of your heart and my heart, there is a wireless station; so long as it receives messages 
        of beauty, hope, courage and power from man and from the infinite, so long as you are 
        young.When your aerials are down, and your spirit is covered with snows of cynicism and the 
        ice of pessimism, then you’ve grown old, even at 20; but as long as your aerials are up, to catch 
        waves of optimism, there’s hope you may die young at 80.

    </div>

    <div class="text2">
        Whether 60 or 16, there is in every human being’s heart the lure of wonders, the 
        unfailing appetite for what’s next and the joy of the game of living. In the center 
        of your heart and my heart, there is a wireless station; so long as it receives messages 
        of beauty, hope, courage and power from man and from the infinite, so long as you are 
        young.When your aerials are down, and your spirit is covered with snows of cynicism and the 
        ice of pessimism, then you’ve grown old, even at 20; but as long as your aerials are up, to catch 
        waves of optimism, there’s hope you may die young at 80.

    </div>

    <div class="text3">
        Whether 60 or 16, there is in every human being’s heart the lure of wonders, the 
        unfailing appetite for what’s next and the joy of the game of living. In the center 
        of your heart and my heart, there is a wireless station; so long as it receives messages 
        of beauty, hope, courage and power from man and from the infinite, so long as you are 
        young.When your aerials are down, and your spirit is covered with snows of cynicism and the 
        ice of pessimism, then you’ve grown old, even at 20; but as long as your aerials are up, to catch 
        waves of optimism, there’s hope you may die young at 80.

    </div>

    <div class="text4">
        Whether 60 or 16
    </div>

今天的我们

共同进步 共同努力 一起奋斗 感觉未来充满了可能