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

概述我想问一下.当我使用 CSS3键入效果时,我遇到了问题.这种效果最终削减了一些文本,所以我希望文本将以新行显示,而不是最后剪切文本. .left-side { float: left; margin-top: 160px; color: #4a4a4a; font-size: 60px; font-family: Avenir;}.left-side 我想问一下.当我使用 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 >                <div >                    <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;

这将解决您的问题.

总结

以上是内存溢出为你收集整理的html – 使用CSS3键入效果会在最后剪切一些文本全部内容，希望文章能够帮你解决html – 使用CSS3键入效果会在最后剪切一些文本所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。