HTML文字未包装

使用有限的CSS和一个由Jquery驱动的按钮构建一个简单的基于文本的HTML文档。我有1个主要问题:我的文字不想自动换行,只是从屏幕上消失了。我尝试应用的任何右填充似乎都出了问题。帮帮我。

Codepen: https://codepen.io/nightcorey/pen/xxwyNgR

<body>
<button class="button">yay</button>

<div class="holder">
    <div class="one current">
        <div class="wrap">
        <p>text here</p>
        </div>
    </div>
    <div class="two">
        <div class="wrap">
        <p>text here</p>
    </div>
    </div>
</div>

<script>
    $("button").click(function () {
        if ($(".holder >div:last-child").hasClass("current")) {
            $(".holder >div:last-child").removeClass("current");
            $(".holder >div:first-child").addClass("current");
        } else {
            $(".current").removeClass("current").next().addClass("current");
        }
    });
</script>
    body {
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.daytext {
    color: black;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.nighttext {
    color: white;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.button {
    position: absolute;
    z-index: 100;
    bottom: 10px;
}

.holder {
    width: 100%;
    height: 100%;
}

.holder div {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    /*init z-index*/
}

.holder div.current {
    z-index: 1;
}

/*only this DIV will be visible*/
.one {
    color: black;
    background: white;
    font-size: 3em;
    line-height: 1.5em;
    font-family: monospace;
}

.two {
    color: white;
    background: black;
    font-size: 3em;
    line-height: 1.5em;
    font-family: monospace;
}

.wrap{
    margin:0 5% 0 5%;
}
评论
Gosse
Gosse

更正您的包装

.wrap {
    padding: 0 5% 0 5%;
    box-sizing: border-box;
}
点赞
评论