html - CSS3打字效果在最后切掉一些文字

Question

我想问一下。当我在 CSS3 中使用打字效果时遇到问题。这个效果最后会剪切一些文本，所以我希望文本显示在新行中而不是最后剪切文本。

.left-side {
    float: left;
    margin-top: 160px;
    color: #4a4a4a;
    font-size: 60px;
    font-family: Avenir;
}

.left-side strong {
    font-family: "Arial Rounded MT Bold";
    color: #ff7916;
}

@media screen and (max-width: 1025px) {
    .left-side {
        width: 100%;
    }
}

@media screen and (max-width: 1200px) {
    .left-side {
        text-align: center;
    }
}

@media screen and (max-width: 670px) {
    .left-side {
        margin-top: 50px;
        font-size: 48px;
    }
}

@media screen and (max-width: 600px) {
    .left-side {
        margin-top: 50px;
        font-size: 38px;
    }
}

@media screen and (max-width: 500px) {
    .left-side {
        margin-top: 50px;
        font-size: 38px;
    }
}

.left-side p:nth-child(1) {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    -webkit-animation: typing 3s steps(100, end);
    -moz-animation: typing 3s steps(100, end);
}

.left-side p:nth-child(2){
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    -webkit-animation: typing 4s steps(100, end);
    -webkit-animation-delay:3s;
    -webkit-animation-fill-mode:both;
    -moz-animation: typing 4s steps(100, end);
    -moz-animation-delay:3s;
    -moz-animation-fill-mode:both;
}

.left-side p:nth-child(3){
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    -webkit-animation: typing 4s steps(100, end);
    -webkit-animation-delay:7.5s;
    -webkit-animation-fill-mode:both;
    -moz-animation: typing 4s steps(100, end);
    -moz-animation-delay:7.5s;
    -moz-animation-fill-mode:both;
}

@-webkit-keyframes typing {
    from { width: 0%; }
    to { width: 100%; }
}

@-moz-keyframes typing {
    from { width: 0%; }
    to { width: 100%; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
            <div class="left-side">
                <div class="col-md-12">
                    <p>First paragraph</p>
                    <p>Second paragraph which is more longer and it's too long...</p>
                    <p><strong>And the last paragraph</strong></p>
                </div>
            </div>

提前感谢您的帮助!

Answer 1

在您的 CSS 中，您不允许浏览器在段落宽度内换行文本。请从 P 标签的 CSS 中删除此属性

white-space: nowrap;

这将解决您的问题。