时间戳

首页 > 解决方案 > 溢出：隐藏在 div 上

html - 溢出：隐藏在 div 上

问题描述

我的部分中有 2 个 div。其中一个 div 是一个文本层，它的部分文本需要隐藏。我无法弄清楚为什么overflow: hidden不起作用。

基本上我只需要用更难的词直到 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>

标签： htmlcssoverflow

解决方案

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

}

会做。overflow: hidden;需要在包含元素上指定，并且由于您要定位 background absolute，因此父容器需要是相对的才能成为绝对的“原点”。

推荐阅读