html – 使用CSS3键入效果会在最后剪切一些文本

2023年10月30日 162次阅读

我想问一下.当我使用
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>

提前感谢您的帮助！

最佳答案 在CSS中,您不允许浏览器在段落的宽度内包装文本.请从CSS for P tag中删除此属性

white-space: nowrap;

这将解决您的问题.

点赞