Overlfow:hidden 在 div

Question

我有一个包含 2 个 div 的部分。其中一个 div 是文本层，需要隐藏部分文本。我不知道 overflow: hidden 不工作的原因。

基本上我只需要写Harder直到D可见。

.work-harder {
    background-color: rgb(64, 68, 230);
    height: auto;

}

.work-harder #background {
    width: 1920px;
    position: absolute;
    padding: 30px 0 0 100px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 208px;
    font-weight: bold;
    color: rgba(26, 27, 86, 0.188);
    text-transform: uppercase; 
    }
    
    .work-harder .content {
    display: flex;
    padding: 30px;
}

.work-harder .content p {
    color: rgb(255, 255, 255);
    font-size: 36px;
    font-weight: bold;
    line-height: 1.111;  
    width: 60%;
    padding: 130px 0 0 350px; 
    margin: 0; 
}

.work-harder .content button {
    color: rgb(41, 41, 53);
    font-size: 18px;
    font-weight: bolder;
    text-align: center;
    background-color:  rgb(255, 255, 255);
    border: none;
    padding: 20px 60px;  
    cursor: pointer;
    margin: 70px 0 0 350px;
}

.content img {
    position: relative;
    top: 70px;
}

<section class="work-harder">
                <div id="background">Work harder</div>
                <div class="content">
                    <div>
                        <p>Aenean bibendum lacus sed ex commodo, pretium rutrum turpis elementum.</p>
                        <button type="submit" class="check">
                            <span>Check it</span>
                        </button>
                    </div>
                    <div>
                        <img src="images/work-harder.png" alt="Macbook image">
                    </div>
                </div>
        </section>

Answer 1

.work-harder {
    background-color: rgb(64, 68, 230);
    height: auto;
    overflow: hidden;
    position: relative;

}

会的。 overflow: hidden; 需要在包含元素上指定，并且由于您要定位背景 absolute，父容器需要是相对的才能成为绝对的 'origin'。

Overlfow:hidden 在 div

Overlfow:hidden on div

html

css

overflow