用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中，您不允许浏览器在段落宽度内包装文本。请删除您的CSS属性为P标记

white-space: nowrap; 

这将解决您的问题。