我的「please wait」文本正從「please」中斷。我想把它顯示爲一個完整的句子。我嘗試了很多,但我的所有嘗試都失敗了。我該如何解決這個問題?文本在HTML中不能正確顯示
.loading {
width: 100PX;
height: 100PX;
margin: auto;
position: fixed;
z-index: 999;
overflow: show;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
.l_main {
position: relative;
width: 100%;
height: 100%;
text-align: center;
}
@-webkit-keyframes hei {
0% {
height: 0%;
width: 0%;
}
50% {
width: 100%;
height: 100%;
}
100% {
height: 0%;
width: 0%;
}
}
@-webkit-keyframes rot {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0);
}
}
.l_main {
border-radius: 50%;
overflow: hidden;
-webkit-animation: rot 3s linear infinite;
}
.l_main .quater {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.l_main .circle {
position: absolute;
background-color: #3d9bb5;
-webkit-animation: hei 3s linear infinite;
border-radius: 50%;
display: inline-block;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 5;
}
.l_main .quater {
z-index: 10;
}
.quater span {
display: inline-block;
width: 50%;
height: 50%;
clear: both;
background-color: white;
}
.quater .top {
float: right;
}
.quater .bottom {
float: left;
}
<div class="loading">
<h3 style="color:#000">Please wait...</h3>
<div class="l_main">
<div class="circle"></div>
<div class="quater">
<span class="top"></span>
<span class="bottom"></span>
</div>
</div>
</div>
你想如何顯示文本。請解釋。 – captainsac
現在它顯示喜歡,然後打破,然後等待。我想在不中斷的情況下顯示全文。 –